searchable drop down in AngularJs

angularjs search filter dropdown
Usman I picture Usman I · Sep 16, 2016 · Viewed 53.5k times · Source

I am fetching data from API and I need a searchable dropdown so that when I start typing it shows me the data coming from the API. Currently I have this piece of code.

<select  class="formControl" name="repeatSelect" id="repeatSelect" ng-model="facilitiesData.business_id">
    <option ng-repeat="option in businesses" value="{{option.id}}">{{option.business_name}}</option>
</select>

Thanks.

Answer

MAC picture MAC · Sep 16, 2016

Probably you are looking for this. This could be one of the solution.

This has different type of typeaheads. You can pick one as per your needs.

<input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control">

Note - You will require a library ui-bootstrap-tpls which is officially created by AngularJS team.

Related questions

How to put a delay on AngularJS instant search?

I have a performance issue that I can't seem to address. I have an instant search but it's somewhat laggy, since it starts searching on each keyup(). JS: var App = angular.module('App', []); App.controller('DisplayController', function($scope, $http) { $http.…

Read More
if else statement in AngularJS templates

I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio. I want to make a condition like this: if …

Read More
How do I use $scope.$watch and $scope.$apply in AngularJS?

I don't understand how to use $scope.$watch and $scope.$apply. The official documentation isn't helpful. What I don't understand specifically: Are they connected to the DOM? How can I update DOM changes to the model? What is the connection …

Read More