基于vue的实时搜索,在结果中高亮显示关键词

1)利用oninput属性来触发搜素功能

  2)利用RegExp来对字符串来全局匹配关键字,利用replace方法来对匹配的关键字进行嵌入高亮的标签,最后利用v-html来嵌入html标签来达到关键字高亮显示


代码

  1)HTML  搜索框部分绑定input事件(搜索框独立出来,作为一个基础组件(叫SearchToolbar.vue),嵌入到KnowledgeSearch.vue中)

<input type="text" class="input-search" placeholder="请输入搜索内容" v-model.trim="searchKey" @input="searchEvent" ref="searchInput" autocomplete="off" autocapitalize="off" autocorrect="off"/>

v-htmlReg为搜索结果的关键字高亮显示

  这一步是在展示数据的组件上做的。

    4.1)HTML结果数据展示部分

1
< div  class="title-info" v-html="ruleTitle"> div >

    4.2)js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import  httpService from  '@/services/HttpService' ;
参考:https://www.cnblogs.com/pengshengguang/p/8059190.html

你可能感兴趣的:(vue)