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"

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

相关推荐
Rubin93几秒前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子1 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598241 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug4 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo4 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢27 分钟前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机33 分钟前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler28136 分钟前
解决setTimeout/setInterval计时不准确问题的方案
前端
sophie旭43 分钟前
《深入浅出react开发指南》总结之 10.1 React运行时总览
前端·react.js·源码阅读
蓝易云1 小时前
Qt框架中connect()方法的ConnectionType参数使用说明 点击改变文章字体大小
linux·前端·后端