angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
时间:2018-08-17
这篇文章主要介绍了angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本篇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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- R语言对BRFSS数据探索回归数据分析
- 使用R语言创建自定义桑基图Sankey图
- 在r语言中使用GAM(广义相加模型)进行电力负荷时间序列分析
- R语言中的偏最小二乘回归PLS-DA
- R语言实现偏最小二乘回归法 partial least squares (PLS)回归
- 用于NLP的Python:使用Keras的多标签文本LSTM神经网络分类
- python爬虫进行Web抓取LDA主题语义数据分析报告
- Python使用神经网络进行简单文本分类
- 在Python中自然语言处理生成词云WordCloud
- 使用Python中的ImageAI进行对象检测
- 适用于NLP自然语言处理的Python:使用Facebook FastText库
- R语言ISLR工资数据进行多项式回归和样条回归分析
- Python中用PyTorch机器学习分类预测银行客户流失模型
- R语言犯罪率回归模型报告Regression model on crimerate report
- leetcode树之从根到叶的二进制数之和