CODEWITHSUNDEEP
angularjssearchfilterdropdown
Usman Iqbal
Usman Iqbal

Reputation: 2429

searchable drop down in AngularJs

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.

Upvotes: 7

Views: 67764

Answers (6)

saravanajd
saravanajd

Reputation: 181

You can use dropdown select plugin

JS

const app = angular.module('DropdownSelectApp', ['DropDownSelect']);

HTML

<dropdown-select dd-model="exampleModel" dd-data="exampleItemList" dd-label="labelName" >

See this like for demo: https://saravanajd.github.io/Angularjs-Dropdown-Search/

Upvotes: 0

Krupesh Kotecha
Krupesh Kotecha

Reputation: 2412

Try this. you cannot directly put textbox inside option and filter select based on it. but this is one way that you can don so. another way is to use plugin or angular material design.

// Angular

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

myApp.controller('ListCtrl', function($scope) {
  $scope.items = [{
    'name': 'Item 1'
  }, {
    'name': 'Item 2'
  }, {
    'name': 'Account 3'
  }, {
    'name': 'Account 4'
  }, {
    'name': 'Item 5'
  }, {
    'name': 'Item 6'
  }, {
    'name': 'User 7'
  }, {
    'name': 'User 8'
  }];
});

// jQuery
$('.dropdown-menu').find('.dontClose').click(function(e) {
  e.stopPropagation();
});
.dropdown.dropdown-scroll .dropdown-menu {
  max-height: 200px;
  width: 60px;
  overflow: auto;
}

.search-control {
  padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="dropdown dropdown-scroll" ng-app="app">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Select <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-controller="ListCtrl">
    <li role="presentation" class="dontClose">
      <div class="input-group input-group-sm search-control">
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-search"></span>
        </span>
        <input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
      </div>
    </li>
    <li role="presentation" ng-repeat='item in items | filter:query'> <a href="#"> {{item.name}} </a>
    </li>
  </ul>
</div>

Upvotes: 8

kapishreshth
kapishreshth

Reputation: 4098

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.

Upvotes: 10

Tanu
Tanu

Reputation: 11

you can use datalist tag also If you want to build your own searchable dropdown ..Here is the working code:

HTML Part:

<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body>

  <div ng-controller="myCtrl">
    <form ng-submit="click(search);">
      <label class="child-label" for="existing-phases">Existing:&nbsp;&nbsp;</label>
      <input type="text" ng-model="search" list="names">
      <datalist id="names" class="form-control" ng-model="name">
        <option value=''>-- select an option --</option>
        <option ng-repeat="option in contacts | filter:search | limitTo:3" value="{{option.name}}"></option>

      </datalist>
      <button type="submit">Submit</button>
    </form>
  </div>
</body>

</html>

JS Part:

var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
  $scope.showContacts = function() {
    $scope.contacts = [{
      id: 1,
      name: "Ben",
      age: 28
    }, {
      id: 2,
      name: "Sally",
      age: 24
    }, {
      id: 3,
      name: "John",
      age: 32
    }, {
      id: 4,
      name: "Jane",
      age: 40
    }];

  };
  $scope.showContacts();
  $scope.click = function(MyData) {
    alert(JSON.stringify(MyData));
  };

});

Working Demo is available here..https://plnkr.co/edit/hamW3F05YUPrWwS3RmmG?p=preview

Upvotes: 1

Gangadhar Jannu
Gangadhar Jannu

Reputation: 4414

If you want to build searchable drop-down on your own then you can make use of filters.searchable drop-down with filters using textbox

If you want to go for a plugin check angular multi select

I've recenlty used in one of my projects. It is a flexible plugin and it allows multi-select also.

Upvotes: 0

nikjohn
nikjohn

Reputation: 21870

You're in the right path. All you need to do now is create an http service or factory that triggers an API call every keypress, and the result of which populates your $scope.businesses array.

Upvotes: 0

Related Questions