[英]Filter search Results
I have a code that searches items from a search bar, however it is on a select dropdown with the search: 我有一个代码,可以从搜索栏中搜索项目,但是在搜索的选择下拉列表中:
[ [ ] ]
However I reciently decided i did not want the select and only the query filter, how would I seperate the code? 但是我坚决决定不希望选择查询过滤器,而只选择查询过滤器,我该如何分隔代码? From the select to independent search. 从选择到独立搜索。 Here is the code I used: 这是我使用的代码:
// AngularJS
var phonecatApp = angular.module('app', []);
phonecatApp.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'
}, {
'name': 'Item 9'
}, {
'name': 'Item 10'
}, {
'name': 'Item 11'
}, {
'name': 'Item 12'
}, {
'name': 'Item 13'
}, {
'name': 'Item 14'
}, {
'name': 'User 15'
}, {
'name': 'User 16'
}, {
'name': 'Person 17'
}, {
'name': 'Person 18'
}, {
'name': 'Person 19'
}, {
'name': 'Item 20'
}, ];
});
// jQuery
$('.dropdown-menu').find('input').click(function (e) {
e.stopPropagation();
});
<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>
.dropdown.dropdown-scroll .dropdown-menu {
max-height: 200px;
width: 60px;
overflow: auto;
}
.search-control {
padding: 5px 10px;
}
You can have just input field on the vie initially then on query edit you show the filtered options to user & when user selects the option you can hide all the options. 您可以仅在vie上输入字段,然后在查询编辑时向用户显示已过滤的选项,当用户选择该选项时,您可以隐藏所有选项。 So this way it'll appear & work just like Typehead. 因此,它会像Typehead一样出现并起作用。 So you can change your template to as follows: 因此,您可以将模板更改如下:
<div class="body-container" ng-app="app">
<div ng-controller="ListCtrl">
<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" ng-change="queryUpdated()" />
</div>
<div class="items" ng-hide="isSelected">
<p class="search-items" ng-click="selectItem(item.name)"
ng-repeat='item in items | filter:query track by $index'> {{item.name}}
</p>
</div>
</div>
</div>
Then along with your existing controller code add these two functions: 然后与您现有的控制器代码一起添加以下两个功能:
$scope.selectItem = function(selected) {
$scope.query = selected;
$timeout(function() {
$scope.isSelected = true;
});
}
$scope.queryUpdated = function() {
$scope.isSelected = false;
}
So this way you can have Typehead like feature & also you can change its behavior according to requirement like showing list on first load or when user unaware of options at all. 因此,这种方式可以具有类似Typehead的功能,也可以根据要求更改其行为,例如在首次加载时显示列表或当用户根本不知道选项时。
Now you can implement same thing using Angular UI Bootstrap plugin library. 现在,您可以使用Angular UI Bootstrap插件库实现相同的操作。 With that your code will look 这样,您的代码将看起来
<input type="text" ng-model="selected"
uib-typeahead="item.name for item in items | filter:$viewValue | limitTo:8"
class="form-control">
Here uib-typehead directive from library will handle addition of template for dropdown options & handling its animation using ngAnimate. 在这里,来自库的uib-typehead指令将处理下拉选项模板的添加,并使用ngAnimate处理其动画。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.