如何使用自定義下拉菜單獲取自動完成功能？

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