CODEWITHSUNDEEP
javascriptangularjs
anub
anub

Reputation: 527

How to filter the elements in dropdown?

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>

Upvotes: 3

Views: 94

Answers (2)

Jorg
Jorg

Reputation: 7250

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'
  }]
}

Upvotes: 1

Samvel Petrosov
Samvel Petrosov

Reputation: 7706

You can use Typeahead.js it provides very flexible control of drop-down lists and filtering of it.

Upvotes: 0

Related Questions