vue el-select实时搜索模糊查询，匹配文字高亮显示

原文链接：https://blog.csdn.net/weixin_49668076/article/details/122678834
参考element ui select的远程搜索

对应属性的解释

<el-select
class="inputInfo"
v-model="searchcursom"
filterable
clearable
remote
placeholder="搜索内容"
:remote-method="querySearch"
@change="handleSelect"
:loading="loading"
@clear="removeclear"

>
<template slot="prefix">//输入框前搜索图标和后搜索文字
<i class="el-icon-search prefixSearch"></i>
<span class="prefixSpan">搜索</span>
</template>
<el-option
v-for="item in helpList"
:disabled="item.disabled"
:key="item.fPkHelpCenterId"
:label="item.fVcHelpCenterName"
:value="item.fPkHelpCenterId"
>
<div v-html="item.parsename"></div>
</el-option>
<div slot="empty" style="height:30px;text-align:center;line-height:30px">无数据</div>//搜不到结果的时候展示对应的文字

</el-select>
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
27
28
29
data() {
return {
menus: [],
subMenuList: [],
openKeys: [],
searchcursom: '',
helpList: [],//模糊查询的数组集合
}
},
1
2
3
4
5
6
7
8
9
搜索事件

querySearch(queryString) {
if (queryString == '') return (this.helpList = []) //当无内容的时候，数组为空，不展示下拉列表
this.loading = true
this.helpList = []
getHelpByquery({ keyWord: queryString }).then((res) => {//调接口，拿到模糊查询到的数据
this.loading = false
if (res && res.code == 0) {
this.searchcursom = queryString
this.helpList = res.data
this.setHighlight(this.helpList, queryString) // 匹配文字高亮显示
}
})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
设置文字高亮

setHighlight(arr, keyword) {
if (arr && arr.length > 0 && keyword) {
arr.unshift({ fPkHelpCenterId: 0, fVcHelpCenterName: '文档名称', disabled: true })//我这里下拉列表有个默认值，
//如果你不需要可以不加
arr = arr.filter((item) => {
let wordname = '文档名称'//可以不加
let reg = new RegExp(this.searchcursom, 'g')
let regresult = new RegExp('文档名称', 'g')//可以不加
let replaceString = `<span style="color:#ff8c00;padding:0">${keyword.trim()}</span>`
let replaceone = `<span style="color:#ccc;padding:0">${wordname.trim()}</span>`//可以不加
if (item.fVcHelpCenterName.match(reg)) {
item.parsename = item.fVcHelpCenterName.replace(reg, replaceString)
return item
}
if (item.fVcHelpCenterName.match(regresult)) {//可以不加
item.parsename = item.fVcHelpCenterName.replace(regresult, replaceone)
return item
}
})
return arr
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
removeclear() {
this.helpList = []
},
1
2
3
下拉框的点击事件

handleSelect(fPkHelpCenterId) {
let arr = []
arr.push(fPkHelpCenterId)
this.selectedKeys = arr
this.onMenuSelected(fPkHelpCenterId)
},
1
2
3
4
5
6
菜单的点击事件

onMenuSelected(fPkHelpCenterId) {
let id = ''
if (fPkHelpCenterId.length > 0) {
id = fPkHelpCenterId[0]
} else {
id = fPkHelpCenterId
}
this.mdSpinning = true
getHelpById({ fPkHelpCenterId: id })
.then((res) => {
if (res) {
this.markDownTxt = res.fVcHelpCenterContent || ''
} else {
this.markDownTxt = ''
}
})
.catch((err) => {
this.markDownTxt = ''
})
.finally(() => {
this.mdSpinning = false
})
},