I have a code snippet that enables searching items from a dropdown menu with a search bar, but now I want to remove the dropdown and only keep the search functionality. How can I modify the code to separate the select feature from the independent search function? Below is the code snippet:
Javascript:
// AngularJS
var app = angular.module('app', []);
app.controller('ListCtrl', function ($scope) {
$scope.items = [{
'name': 'Item 1'
}, {
'name': 'Item 2'
},
...
{
'name': 'Item 20'
}, ];
});
// jQuery
$('.dropdown-menu').find('input').click(function (e) {
e.stopPropagation();
});
HTML:
<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">
<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>
CSS:
.dropdown.dropdown-scroll .dropdown-menu {
max-height: 200px;
width: 60px;
overflow: auto;
}
.search-control {
padding: 5px 10px;
}