下拉菜单的 Typeahead 实现答案

【问题标题】：Typeahead implementation for dropdown下拉菜单的 Typeahead 实现
【发布时间】：2016-03-11 10:13:15
【问题描述】：

我正在为下拉菜单创建 typeahead。我使用了 angularjs-typeahead-dropdown.min 。但它不起作用。下面是我的代码

    <head>
        <script src="src/angular.min.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="Typeahead.js"></script>
        <script src="src/angularjs-typeahead-dropdown.min.js"></script>
        <title></title>
    </head>
<div class="container">
      <typeahead-dropdown id="ex1" ng-model="ex1model" options="ex1data" config="ex1config"></typeahead-dropdown>
    </div>

在js文件中

$scope.ex1model = [];
    $scope.ex1data = [{ id: 1, label: "Tony" },
               { id: 2, label: "Larita" },
               { id: 3, label: "Brian" },
               { id: 4, label: "Andrew" },
               { id: 5, label: "Bruno" },
               { id: 6, label: "Adrian" },
               { id: 7, label: "Stuart" },
               { id: 8, label: "Stephen" },
               { id: 9, label: "Peter" },
               { id: 10, label: "Alexander" }];
    $scope.ex1config = { modelLabel: "id", optionLabel: "label" };

这不起作用。 html页面中没有任何内容。请告诉我如何为下拉菜单实现预先输入。有没有其他办法。 我不应该使用 jquery

【问题讨论】：

标签： angularjs typeahead.js bootstrap-typeahead twitter-typeahead angular-ui-typeahead

【解决方案1】：

您可以在输入框上使用 UI Bootstrap 的下拉菜单，如下所示

<div uib-dropdown> <input type="text" ng-model="searchKey" uib-dropdown-toggle> <ul uib-dropdown-menu> <li ng-repeat="data in ex1data | filter:searchKey"> {{data.label}} </li> </ul> </div>

查看文档以获取 UI Bootstrap 下拉列表 here

【讨论】：

【解决方案2】：

我建议使用 select2
此链接将使您从头开始学习如何使用它 select2 for beginner

这个链接会让你明白为什么要使用它看看 Examples for select2

【讨论】：

它正在使用 jquery :(