angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018-08-17 14:07
906 查看
本篇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来绑定数据。
演示效果
开源项目地址:https://github.com/alex-0407/ionic3-awesome
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 在 Angular 中实现搜索关键字高亮示例
- JavaScript简单实现关键字文本搜索高亮显示功能示例
- 在 Angular 中实现搜索关键字高亮
- 在 Angular 中实现搜索关键字高亮
- vue2实现搜索结果中的搜索关键字高亮的代码
- 实现在搜索后将结果中的关键字高亮显示
- 简单JavaScript语句实现搜索关键字高亮功能
- 如何实现IOS_SearchBar搜索栏及关键字高亮
- Android 搜索结果匹配关键字且高亮显示功能
- 在WSS搜索结果页面中高亮显示搜索关键字
- 实现在搜索结果页面中变色显示搜索关键字
- php站内搜索并高亮显示关键字的实现代码
- angularjs实现搜索的关键字在正文中高亮出来
- 截取关键字高亮作为搜索结果
- Android学习------运用 Filter 实现关键字搜索,并且高亮显示关键字
- 使用正则表达式实现搜索关键字高亮显示
- JS实现静态页面搜索并高亮显示功能完整示例
- jsp网页搜索结果中实现选中一行使其高亮
- 用JS将搜索的关键字高亮显示实现代码
- Angularjs实现搜索关键字高亮显示效果