首页 > 其他分享 >vue el-select实时搜索模糊查询,匹配文字高亮显示

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

时间:2024-08-01 18:17:47浏览次数:17  
标签:el arr vue helpList res item let fPkHelpCenterId 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
})
},

标签:el,arr,vue,helpList,res,item,let,fPkHelpCenterId,select
From: https://www.cnblogs.com/fswhq/p/17698620.html

相关文章

  • 招投标系统VUE网页编辑Word且兼容微软Office和金山WPS支持Electron
    随着信息技术的不断发展,电子政务已经非常普及,电子招投标行业市场规模不断扩大,电子招投标不仅可以减少繁琐的人工操作,提高工作效率,还能保证公开透明的招标流程,制作招标文件过程中,由于微软Office和金山WPS等办公软件无法直接内嵌到浏览器中,有的招标制作工具用的Electron,需要在纯内网......
  • Pixel Aligned Language Models论文阅读笔记
    Motivation&Abs近年来,大语言模型在视觉方面取得了极大的进步,但其如何完成定位任务(如wordgrounding等)仍然不清楚。本文旨在设计一种模型能够将一系列点/边界框作为输入或者输出。当模型接受定位信息作为输入时,可以进行以定位为condition的captioning。当生成位置作为输出时,模型......
  • webservice hello
    一、//hello.hintns__hello(std::stringname,std::string&greeting);二、//helloclient.cpp#include"soapH.h"#include"ns.nsmap"#include<string>#include<iostream>usingnamespacestd;inthello(structsoap*so......
  • 计算机毕业设计django+vue宠物领养系统【开题+论文+程序】
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着人们生活水平的提高和情感需求的日益增长,宠物已成为许多家庭不可或缺的重要成员。然而,宠物领养市场存在着信息不对称、流程繁琐、匹配......
  • 计算机毕业设计django+vue多彩信管团学管理系统【开题+论文+程序】
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景在高等教育体系中,学生组织如学生会与团委扮演着举足轻重的角色,它们不仅是学生自我管理、自我服务、自我教育的重要平台,也是校园文化建设和......
  • vue播放flv、hls(m3u8)视频及动态切换视频流
    【了解video.js】官方地址: https://github.com/videojs/video.js【用法】1、安装npminstallvideo.js--savenpminstallvideojs-flash--save//rtmp格式//flv格式npminstallflv.js--savenpminstallvideojs-flvjs-es6--save//hls格式video.js7.0以后版本......
  • 第 6 行 else print('不好') ^^^^^ 语法错误:预期为 ':'
    salary=int(input('enteryoursalary:\n'))hours=int(input('enteryourhours:\n'))total_salary=salary*hoursiftotal_salary<200000:print('good')else:print('notgood')你错过了(:)否则这就是它不起作用的原因......
  • vue集成svg大图拖拽无限放大缩小
        vue项目中根据实际CAD图为参考,以及参看项目实际现场,手动绘制了一张线体、堆垛机、库区货架svg图,集成到vue页面中,svg图中可以交互接收C#发送过来的singalR实时数据。接收singalR的实时数据并显示到vue中,这里不作展开讲,可以参看笔者另一篇文章《vue若依集成C#的singalR接......
  • Modelsim仿真实现Verilog HDL序列检测器
    检测接收到的数字序列中出现“10011”的次数。例如输入序列为40位:1100_1001_1100_1001_0100_1100_1011_0010_1100_1011从最高位开始检测,出现了2次:1100_1001_1100_1001_0100_1100_1011_0010_1100_1011所以,序列检测器的计数结果应该是2。状态机如下:当前状态current_stat......
  • vue+通义大模型的聊天项目
    智能聊天chat_ali_server.py为服务端,需要配置自己的阿里API_KEY,URL阿里云配置方式剩下的是客户端修改src/store/index.js中serverhost变量的值npminpmrundev应该就可以了如需定制开发,联系:18841685054Github......