javascript - 如何通过自定义下拉菜单获得自动填充功能？

我必须实现自动完成的自定义下拉列表，但我无法获得它，在ng-change上我得到了响应。但是问题是如何通过键入前三个字母来获得自动完成功能，以及如何使用键盘键在下拉菜单中移动。

JavaScript：

  $scope.fnAutocompleteQuestion = function (question) {
       $scope.data = [
        { "val": 1, "txt": "one" },
        { "val": 2, "txt": "two" },
        { "val": 3, "txt": "three" },
        { "val": 4, "txt": "four" },
        { "val": 5, "txt": "five" }];
       console.log($scope.data);
   };

HTML：

      <div class="input-group dropdown" ng-class="{'open': mydropdownQues}">
        <input type="text" class="form-control" ng-model="input.question"
  data-toggle="dropdown" aria-describedby="basic-addon2" ng-change="fnAutocompleteQuestion(input.question);mydropdownQues=!mydropdownQues">
   <div class="dropdown-menu width-menu">
            <ul class="ul-scroll">
                <li ng-repeat="value in data " ng-click="input.question=value.txt">
                    {{value.txt}}
                    <hr ng-show="!$last">
                </li>
            </ul>
        </div>
    </div>

最佳答案

您只需要在filter: input.question中添加ng-repeat，其中input.question是ng-model的搜索文本。像这样：

 <li ng-repeat="value in data | filter: input.question" ng-click="input.question=value.txt">
     {{value.txt}}
     <hr ng-show="!$last">
 </li>

working example

关于javascript - 如何通过自定义下拉菜单获得自动填充功能？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43406831/