angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例


Posted in Javascript onAugust 17, 2018

本篇angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例,分享给大家,具体如下:

添加一个pipe:

import { Pipe, Injectable, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
 name: 'keyword'
})
@Injectable()
export class KeywordPipe implements PipeTransform {
 constructor(private sanitizer: DomSanitizer) {
 }

 transform(val: string, keyword: string): any {
  const Reg = new RegExp(keyword, 'i');
  if (val) {
   const res = val.replace(Reg, `<span style="color: #81E1B7;">${keyword}</span>`);
   console.log(res);
   return this.sanitizer.bypassSecurityTrustHtml(res);
  }
 }
}

注: DomSanitizer,这个的目的是是数据在页面上的绑定能够safe的解析

html中使用方法:

<ion-label [innerHTML]="item.name | keyword:searchText"></ion-label>

注: 在标签里面用新的标签包起来,不然会有样式问题; 要用innerHTML来绑定数据。

演示效果

angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例

开源项目地址:https://github.com/alex-0407/ionic3-awesome

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js生成随机数之random函数随机示例
Dec 20 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 #Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 #Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 #Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 #Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 #Javascript
JavaScript实现构造json数组的方法分析
Aug 17 #Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 #Javascript
You might like
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
php制作文本式留言板
2015/03/18 PHP
AJAX的使用方法详解
2017/04/29 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
决策树的python实现方法
2014/11/18 Python
python获取指定网页上所有超链接的方法
2015/04/04 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
python简单实现9宫格图片实例
2020/09/03 Python
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
致铅球运动员加油稿
2014/02/13 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
三方股东合作协议书
2014/10/28 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
活动总结书怎么写
2015/05/11 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis
Java中的随机数Random
2022/03/17 Java/Android