ionic,angularJs实现搜索框过滤关键字
利用AngularJS自带的过滤器,我们可以很方便的实现搜索框过滤的效果,但是怎么实现类似百度搜索过滤列表中关键字变色的效果呢?
页面上代码:
<input type="text" ng-model="keyword" style="border:solid 1px #E4E5E7;">
<div style="margin:20px;">
<div style="padding: 10px;" ng-repeat="d in data | filter:keyword">
<span ng-bind-html = "d | wordPlace:keyword"></span>
</div>
</div>
控制器代码:
angular.module('starter.filter', [])
.filter('wordPlace', function ($sce) {
return function (input, word) {
if (!word)
return input;
var result = input.replace(word, "<span style='color:#6CA4FF;'>" + word + "</span>");
return $sce.trustAsHtml(result);
};
})
过滤器实现起来也很简单,找到item中的关键字部分替换为一个带样式的span标签+关键字,这样就可以了。注意一点,要调用angularjs的$sce.trustAsHtml()方法,否则这个过滤器在最终编译后在页面上显示的是直接带span标签的字符串,不会 解析为html标签。
ionic,angularJs实现搜索框过滤关键字的更多相关文章
- 函数stripslashes去除转义 shopnc 搜索框过滤特殊字符 输入单斜杆会自动转义
如何php是如何处理和过滤特殊字符的呢? 搜索%_显示所有商品:搜索\会在搜索框内叠加\\ 查了一下 magic_quotes_sybase 项开启,反斜线将被去除,但是两个反斜线将会被替换成一个. ...
- angularjs select下拉搜索框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用jQuery实现搜索框的过滤效果
遇到的问题: 1.动态添加了某些元素,在动态添加的某个元素上绑定事件失效 原因:因为需要绑定的元素的直接父元素也是动态添加的解决:向上为上一级父元素绑定事件 $(".check-box&qu ...
- (八)solr7实现搜索框的自动提示并统计词频
solr7实现搜索框的自动提示并统计词频 1:用solr 的suggest组件,统计词频相对麻烦. 2:用TermsComponent,自带词频统计功能. Terms组件提供访问索引项的字段和每个词 ...
- weui 搜索框
点击搜索,会显示关键字取消按钮,输入文字,会在搜索框下,有相应的列表显示. HTML: <!DOCTYPE html> <html> <head> <meta ...
- iOS之搜索框UISearchController的使用(iOS8.0以后替代UISearchBar+display)
在iOS 8.0以上版本中, 我们可以使用UISearchController来非常方便地在UITableView中添加搜索框. 而在之前版本中, 我们还是必须使用UISearchBar + UISe ...
- 三、jQuery--jQuery实践--搜索框制作
input标签讲解 <input/>作为按钮的type属性:button.submit(后面会有二者对比分析)
- iOS学习之NSPredictae及搜索框的实现
NSPredicate Predicate 即谓词逻辑, Cocoa框架中的NSPredicate用于查询,作用是从数据堆中根据条件进行筛选.计算谓词之后返回的结果永远为BOOL类型的值,当程序使用谓 ...
- Android 浮动搜索框 searchable 使用(转)。
Android为程序的搜索功能提供了统一的搜索接口,search dialog和search widget,这里介绍search dialog使用.search dialog 只能为于activity ...
随机推荐
- 学习Git的总结与体会
学习Git的总结 blog 第一次学习Git是完全按照廖雪峰老师的教程学习的,学的过程中基本上没有遇到什么问题,但是自己实际操作就问题不断了. 首先,还是按照惯例,来膜拜一下廖雪峰老师精简的教程知识吧 ...
- 关于el jstl
requestScope表示从request范围内取得.其他的还有sessionScope, pageScope和applicationScope,分别对应4种属性范围.而如果直接写${passwor ...
- springmvc json字符串转化成json对象
问题出现在 :页面数据列表的展示出现 [object HTMLInputElement] 找到问题的所在原因后又三种解决方案 一:格式化json字符串为json对象字符串 success:functi ...
- list中的中文转换编码显示
for i in range(1,sheet.nrows): row=sheet.row_values(i,0,sheet.ncols) row=str(row).replace('u\'','\'' ...
- 我的Android第五章
今天我们来讲一下Android四大组件中的activity的生命周期, 首先我们可以看一张activity的生命周期的图解看一下 关于Activity的生命周期,有以下几个要注意的点: 1.最开始进入 ...
- CSS使用
CSS介绍 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 语法:style = 'key1:value1;key2:value2;' 存在方式有 ...
- CSS3 :target伪类实现Tab切换效果
用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...
- Web API
https://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api ...
- NPOI导入xls,xlsx格式实例
NPOI DLL下载地:http://npoi.codeplex.com/releases using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; us ...
- 最小化安装的CentOS7挂载ntfs格式的U盘
准备从系统中拷贝一些文件到U盘,插上U盘. 一.获得U盘的设备识别符 fdisk -l 啊哈,我看到了,是/dev/sdb1 二.熟练的挂载 mount /dev/sdb1 /mnt/usb Duan ...