1）利用oninput属性来触发搜素功能
2）利用RegExp来对字符串来全局匹配关键字，利用replace方法来对匹配的关键字进行嵌入高亮的<span class="gaoliang">标签，最后利用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-html与Reg为搜索结果的关键字高亮显示
这一步是在展示数据的组件上做的。
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'
;
<script>
export
default
{
props: {
// 每一条带关键字的结果对象，父组件传过来的
item: {},
},
computed: {
ruleTitle() {
let
titleString =
this
.item.name;
if
(!titleString) {
return
''
;
}
if
(
this
.searchValue &&
this
.searchValue.length > 0) {
// 匹配关键字正则
let
replaceReg =
new
RegExp(
this
.searchValue,
'g'
);
// 高亮替换v-html值
let
replaceString =
'<span class="search-text">'
+
this
.searchValue +
'</span>'
;
// 开始替换
titleString = titleString.replace(replaceReg, replaceString);
}
return
titleString;
}
},
}
</script>
|