如何使用自定义下拉菜单获取自动完成功能？

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

你只需要添加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