angular2 pipe实现搜索结果中的搜索关键字高亮
效果图如下
1、声明一个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 { let Reg=new RegExp(keyword,"i");
if(val){
let res = val.replace( Reg,`<span style="color: #ff2424;">${keyword}</span>`);
console.log(res)
return this.sanitizer.bypassSecurityTrustHtml(res);
}
}
} 注意:DomSanitizer,这个的目的是是数据在页面上的绑定能够safe的解析
2.在页面中使用
<ion-item class="list-data" *ngFor="let item of bonds?.result"
(click)="productUtils.showDetail(item.internal_code,'bond',item.is_pi_only)">
<span class="company-name" [innerHTML]="item.name | keyword:keyword"></span><span class="code" [innerHTML]="item.internal_code | keyword:keyword"></span>
</ion-item>
在<ion-item>标签里面用新的标签包起来,不然会有样式问题; 要用innerHTML来绑定数据。
angular2 pipe实现搜索结果中的搜索关键字高亮的更多相关文章
- 用Java实现自动打开浏览器在搜索框中进行搜索
主要使用了Java的剪切板操作和Robot类 上代码: package pers.jeaven.AutoRobot.main; import java.awt.Desktop; import java ...
- vue2实现搜索结果中的搜索关键字高亮
// 筛选变色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && k ...
- SAP CRM 在Web UI中创建搜索帮助
多数情况下,在Web UI为一个特定的字段提供搜索帮助需要在事务SE11中创建搜索帮助. (注:也可以通过在SE24中创建一个类并实现实现IF_BSP_WD_CUSTOM_F4_CALLBACK接口来 ...
- 第七章 人工智能,7.6 DNN在搜索场景中的应用(作者:仁重)
7.6 DNN在搜索场景中的应用 1. 背景 搜索排序的特征分大量的使用了LR,GBDT,SVM等模型及其变种.我们主要在特征工程,建模的场景,目标采样等方面做了很细致的工作.但这些模型的瓶颈也非常的 ...
- 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
- 详细解读Android中的搜索框—— SearchView
以前总是自己写的 今天看看别人做的 本篇讲的是如何用searchView实现搜索框,其实原理和之前的没啥差别,也算是个复习吧. 一.Manifest.xml 这里我用一个activity进行信息的输入 ...
- 在stream流和byte[]中查找(搜索)指定字符串
在 stream流 和 byte[] 中查找(搜索)指定字符串 这里注重看的是两个 Search 的扩展方法,一个是 stream 类型的扩展,另一个是 byte[] 类型的扩展, 如果大家有更好的“ ...
- 理解Lucene索引与搜索过程中的核心类
理解索引过程中的核心类 执行简单索引的时候需要用的类有: IndexWriter.Directory.Analyzer.Document.Field 1.IndexWriter IndexWr ...
- extjs在窗体中添加搜索框
在extjs中添加搜索框,搜索框代码如下: this.searchField = new Ext.ux.form.SearchField({ store : this.store ...
随机推荐
- GreenDao 使用和数据库升级
1使用方法 一.添加依赖 在bulid.gradle文件下的dependencies下添加所需依赖 compile 'org.greenrobot:greendao:3.2.2' // add l ...
- uva12545
#include<iostream> using namespace std; +; char s[maxn],t[maxn]; int main(){ //freopen("1 ...
- HTML5基础标签
块级元素 1.独占一行,不和其他元素待在同一行 2.能设置宽高 标签 是否为单标签 标签属性 备注 <h1></h1>......<h6><h6> 双 ...
- 【2017-05-02】winform弹出警告框选择性操作、记事本制作、对话框控件和输入输出流
一.winform弹出警告框选择性操作 MessageBox.Show()返回一个枚举类值(第一个参数为弹出窗口显示的内容,第二个参数为弹出窗口的标题,第三个参数为弹出窗口包含的按钮) 先新建一个变量 ...
- Spring 工具包
Spring 工具包: spring-core-.RELEASE.jar!\org\springframework\util
- 解决 img 标签上下出现的间隙
我们在平常的开发过程中,经常需要使用多张图片,而使用多张图片的时候,一般会去使用一个列表来对我们的img进行承装.就算我们把img的外边距和内边距全部清空了,但是这时会发现图片上下单会多出一定的间隙. ...
- Quartz Scheduler misfireThreshold属性的意义与触发器超时后的处理策略
Quartz misfireThreshold属性的意义与触发器超时后的处理策略. 在配置quartz.properties有这么一个属性就是misfireThreshold,用来指定调度引擎设置触发 ...
- jQuery创建、删除和修改html标签
1.在父标签内创建子标签,新创建的子标签放在父标签最下面 $(parent).append(son).$(son).appendTo(parent) <div class="d&quo ...
- ant_<target>标签含义与使用
<target>标记目标 目标是一个或多个任务的集合,任务是一段可执行的代码:构建文件中包含一个项目,在项目内部声明了所有目标: <target name = "run&q ...
- vue-cli 构建项目在IE中无法运行解决方式(build之后可运行)
IE浏览器(只考虑IE11,更低版本我没考虑)运行时报 Promise未定义的错误 解决办法: 1. 安装babel-polyfill (1.) npm install babel-polyfill ...