el-autocomplete远程搜索 实现 自定义内容显示、关键字变色功能

效果实现:

ini 复制代码
            <el-autocomplete class="select-box" v-model="adressValue"
				:fetch-suggestions="querySearchAsync"
				placeholder="请输入内容"
				:suffix-icon="suffixIcon"
				clearable
				:popper-append-to-body="false"
				@input="handleInput"
				@select="handleSelect">
				<!-- 这里可以根据需要显示更多的内容 -->
                <template slot-scope="{ item }">
                      <div class="dis-flex li-box">
			<div class="vertical-center">
                                <img style="width: 32px;height: 32px;margin-right: 5px;" :src="item.image" alt="" srcset=""></div>
			<div class="custom-item">
			<div class="title-adress"  v-html="highlightKeyword(item.address)"></div>
			<div class="small-title">{{ item.value }}</div>
			</div>
		   </div>
		  </template>
	</el-autocomplete>
            

定义的数据格式是

js 复制代码
	loadAll() {
				return [
					{ "value": "崇左市", "address": "广西瀑布" },
					{ "value": "百色市", "address": "乐业天坑" },
					{ "value": "桂林市", "address": "阳朔" },
			
				];
			},

加入图片显示,可通过map或者forEach的形式在querySearchAsync()方法中进行遍历在每个对象中添加:

js 复制代码
// 异步搜索
			querySearchAsync(queryString, cb) {
                        ....
                        // 添加图片
			restaurants.forEach((restaurant) => {
					restaurant.image = Image;
				});
                        // 将关键词包裹在 <span> 中,并添加上样式
			restaurants.forEach((restaurant) => {
				restaurant.highlightedAddress = this.highlightKeyword(restaurant.address, queryString);
					});
                         //通过自带的回调进行返回
			cb(restaurants);
//这个方法的作用是对传入的文本 value进行关键字高亮处理,属性存在,会匹配关键字,并且会给它添加自定义样式                        
highlightKeyword(value) {
				if (!this.adressValue) {
				return value;
				}
                                //使用js中的replace方法来在value中查找并替换与this.adressValue匹配的文本。  
                                // 用于全局(g)地、不区分大小写(i)地匹配this.adressValue
				const highlighted = value.replace(new RegExp(this.adressValue, 'gi'), match => {
                             
				return `<span style="color: #065fc7;">${match}</span>`;
				});
                                //返回高亮文本
				return highlighted;
				},
//本功能使用模糊查询,可根据需要进行选择
createStateFilter(queryString) {
				return (state) => {
					// 精确
					// return (state.address.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
					//模糊
    return state.address.toUpperCase().match(queryString.toUpperCase());
				};
			},                        

想改变组件内部样式,需要添加组件中的popper-append-to-body属性,在使用深部选择器样式才会生效。

:popper-append-to-body="false"

以上是基于业务功能需求而进行改造,记录一下!!

相关推荐
web守墓人33 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L39 分钟前
CSS知识复习5
前端·css
许白掰39 分钟前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir8 小时前
vue3.2 前端动态分页算法
前端·算法