使用angular.js和ui.utils突出显示搜索结果
Highlight search result using angular.js and ui.utils
我正在尝试使用angular添加一些搜索结果的突出显示。我发现UI.Utils中的高亮显示功能给出了我想要的结果。但是这些例子都是使用CCD_ 1。有没有办法使用这种模板方法?
<div ng-app>
<div ng-controller="searchController">
<input ng-model="query"/>
<div class="t">
<div class="tr" ng-repeat="person in result">
<div class="td">{{person.FirstName | highlight}}</div>
<div class="td">{{person.LastName | highlight}}</div>
</div>
</div>
</div>
</div>
查看jsfiddle上的代码:http://jsfiddle.net/vs7Dm/4/
要做到这一点,在使用ui angular 的高亮过滤器之前,您必须完成几个步骤
您需要将ngSanitize作为依赖项。见下文;
var app = angular.module('app',['ngSanitize']);
将此添加到您的HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-sanitize.min.js"/>
将突出显示过滤器复制到你的应用程序中,就像一样
app.filter('highlight', function () {
return function (text, search, caseSensitive) {
if (text && (search || angular.isNumber(search))) {
text = text.toString();
search = search.toString();
if (caseSensitive) {
return text.split(search).join('<span class="ui-match">' + search + '</span>');
} else {
return text.replace(new RegExp(search, 'gi'), '<span class="ui-match">$&</span>');
}
} else {
return text;
}
};
});
然后你所做的是为你的可搜索结果部分:
<input type="text" placeholder="Search..." ng-model="searchText" />
<div ng-repeat="address in addresses | filter:searchText">
<p ng-bind-html="address.title | highlight:searchText"></p>
<p ng-bind-html="address.address_1 | highlight:searchText"></p>
<p ng-bind-html="address.address_2 | highlight:searchText"></p>
<p ng-bind-html="address.address_3 | highlight:searchText"></p>
</div>
请注意,在ng中使用ng-bind-html是重复的,而不是ui angular建议的ng-bind-html是不安全的-html unsafe已从核心中删除,需要注入到您的应用程序中。
这就是我使用AngularJS v1.3.0运行它所需要的一切。
如果你对这种方法有任何问题,请告诉我。
此处演示
相关文章:
- 检查搜索结果是否存在多次如果是,则在Javascript中只显示一个结果
- 显示可链接的搜索结果+对齐方式
- 为自定义网站创建JavaScript搜索框,创建显示搜索结果的弹出窗口
- 使用 jQuery UI 折叠面板显示 couchDB 数据库搜索结果时出现问题
- 如何将搜索结果显示为“搜索结果”;显示300〃中的1-10〃;
- 谷歌自定义搜索结果通过代理显示错误
- 搜索结果未显示在同一窗口中
- Javascript PHP在点击搜索时出现弹出图像,关闭图像后显示搜索结果
- 显示搜索结果
- 提示搜索不显示搜索结果
- 突出显示搜索结果在某些情况下不起作用
- 如何在覆盖中显示搜索结果页面
- 使用Angular显示搜索结果
- 在模态对话框中显示搜索结果
- 用Angular过滤器突出显示搜索结果,隐藏不匹配的文本
- 用jquery在smarty模板上显示搜索结果
- 如何显示搜索结果
- 在某些字符输入角度后显示搜索结果
- 使用angular.js和ui.utils突出显示搜索结果
- 显示搜索结果而不重新加载页面