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"

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

相关推荐
mCell7 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip7 小时前
Node.js 子进程:child_process
前端·javascript
excel10 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel11 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼13 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping13 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙14 小时前
[译] Composition in CSS
前端·css
白水清风14 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix14 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780014 小时前
new、原型和原型链浅析
前端·javascript