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"

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

相关推荐
轻口味15 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami18 分钟前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
吃杠碰小鸡1 小时前
lodash常用函数
前端·javascript
emoji1111111 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼1 小时前
nestjs:GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250031 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235951 小时前
web复习(三)
前端
AiFlutter1 小时前
Flutter-底部分享弹窗(showModalBottomSheet)
java·前端·flutter
麦兜*1 小时前
轮播图带详情插件、uniApp插件
前端·javascript·uni-app·vue