如何过滤下拉列表中的元素？

Question

I have a scenario, in that I have to filter the elements in dropdown based on input given in text box. Is it possible, so how to do that? I tried with ng-change but it is not getting.

Html code:

<input type="text" ng-model="somvar" ng-change="someFunc(somvar)" />

<div id="dropdown" class="dropdownClass">
    <ul class="predtsct">
        <li class="prfdwn" ng-repeat="list in countries| filter: somevar" ng-click="countryIdFunc(countriesLst.countryId)">{{list.countryName}}</li>
    </ul>
</div>

Answer 1

From the fiddle I posted in the comments: A dropdown works no differently that an ordinary list, except that the styling is different. This example uses Bootstrap to do the dropdown, but you can find many other examples if you google them.

Working version: https://jsfiddle.net/jorgthuijls/6gvp2z9h/

This is the entire view:

<div ng-controller="MyCtrl">
  city: <input type="text" ng-model="search.city">

  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <!-- the 'search' bit in the filter maps to the 'search' variable on $scope -->
      <li ng-repeat="user in users | filter:search:strict">{{user.name}}, {{user.city}}</li>
    </ul>
  </div>
</div>

The controller is also pretty small:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.search = {};
  $scope.search.city = 'new york';
  $scope.users = [{
    name: 'bob',
    city: 'hong kong'
  }, {
    name: 'jack',
    city: 'new york'
  }, {
    name: 'john',
    city: 'new hampshire'
  }]
}

Answer 2

您可以使用Typeahead.js，它可以非常灵活地控制下拉列表并对其进行过滤。