CODEWITHSUNDEEP
javascriptangularjsautocomplete
anub
anub

Reputation: 527

How to get autocomplete with customized dropdown?

I have to implement the customized dropdown for autocomplete but I am unable to get it, here on ng-change I am getting the response. But the problem is how to get the autocomplete by typing first three letters and have to move through the dropdown by using keyboard keys.

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>

Upvotes: 0

Views: 48

Answers (1)

tanmay
tanmay

Reputation: 7911

You just need to add filter: input.question in your ng-repeat where input.question is ng-model for search text. Something like this:

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

working example

Upvotes: 1

Related Questions