如何使用自定义下拉菜单自动完成？

Question

我必须为自动完成实现自定义下拉列表，但我无法得到它，在 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>

Answer 1

您只需在ng-repeat 中添加filter: input.question，其中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