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"

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

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

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