Menu
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.
252
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.
61
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>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: </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
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
