element的el-autocomplete带输入建议搜索+搜索匹配文字高亮显示（三种方法）

方法一：使用v-html替换掉相应的输入文字

<el-autocomplete
            class="inline-input mt-2"
            v-model="activity_name"
            auto-complete="off"
            :fetch-suggestions="querySearch"
            :placeholder="$t('m.content.activitys.ACTIVITY_NAME')"
            :trigger-on-focus="true"
            @select="handleSelect"
            @change="change"
            @keyup.enter.native="select()"
            >
            <ul slot-scope="{ item }">
              <li class="name">
<span v-html="utils.brightenKeyword(item.value, activity_name)" ></span>
              </li>
            </ul>       
          </el-autocomplete>

在这里的v-html=“utils.brightenKeyword(item.value, activity_name)”
brightenKeyword就是我们在工具函数util里面自定义的一个指令函数，具体写法如下：

brightenKeyword(val, keyword) {
	   const Reg = new RegExp(keyword, 'i');
	   if (val) {
	     return val.replace(Reg, `<span style="color: #409EFF;">${keyword}</span>`);
	   }
	 },

我们需要在main.js里面注册这个util

import utils from './util/util'

这样就可以使用了
el-autocomplete这里就不展示这个组件的函数了，有需要的请移步至element-ui组件库查看。
方法二：自己根实际情况写在函数里面

<el-autocomplete
            class="inline-input"
            v-model="q_select.store_name"
            :fetch-suggestions="querySearchShop"
            :placeholder="$t('m.content.shop.SHOPNAME')"
            :trigger-on-focus="true"
            @input="queryText"
            @select="handleSelectShop"
            @keyup.enter.native="selectParams()"
          >
            <ul slot-scope="{ item }">
              <li class="name">
                <span>{{item.startValue}}</span>
                <span style="color: #26B4FF">{{item.keyValue}}</span>
                <span>{{item.endValue}}</span>
              </li>
            </ul>
          </el-autocomplete>

然后我们在函数里面

querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      var obj = {};
      results = results.reduce(function(data, next) {
        obj[next.value] ? '' : obj[next.value] = true && data.push(next);
        return data;
      }, []);
      for (var item of results) {
         var start = item.value.indexOf(this.q_select.activity_name)
        //  console.log(start)
        item.endValue = item.value.substring(start+this.q_select.activity_name.length,item.value.length)
        //item.endValue = item.value.split(this.q_select.activity_name)[1]
         if(start > 0) {
           item.keyValue = this.q_select.activity_name
           item.endValue = item.value.split(this.q_select.activity_name)[1]
           item.startValue = item.value.split(this.q_select.activity_name)[0]
         }
         if(start == 0){
            item.keyValue = this.q_select.activity_name
            item.startValue = ''
            //  item.endValue = item.value.split(this.q_select.activity_name)[1]
            item.endValue = item.value.substring(start+this.q_select.activity_name.length,item.value.length)
         }
       }
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1);
      };
    },

此方法自己根据自己的实际情况写哦。
方法三：可以使用自定义指令的方法（此方法在我的项目里不起作用，但是是可以使用的）
注意：这里是引用别人的方法：博主文章在这里
添加链接描述https://blog.csdn.net/weixin_44963099/article/details/105950658?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allfirst_rank_v2~rank_v25-1-105950658.nonecase

<el-autocomplete
            class="inline-input"
            v-model="q_select.store_name"
            :fetch-suggestions="querySearchShop"
            :placeholder="$t('m.content.shop.SHOPNAME')"
            :trigger-on-focus="true"
            @input="queryText"
            @select="handleSelectShop"
            @keyup.enter.native="selectParams()"
          >
            <template slot-scope="{ item }">
              <div class="name" v-hightlight:[item.value]="state"></div>
            </template >
          </el-autocomplete>
          

js代码

import Vue from 'vue'

function hightLight(el, binding) {
  const match = binding.value;
  const reg = new RegExp(match, 'g')
  const txt = binding.arg
  console.log('txt', txt);
  
  let str = '';
  if (txt) {
    str = txt.replace(reg, `<span style="color: #26B4FF;">${match}</span>`)
    console.log(str);
    
  } else {
    str = ''
  }
  el.innerHTML = str;
}
const hh = Vue.directive('hightlight', {
  bind(el, binding) {
    hightLight(el, binding)
  },
  componentUpdated(el, binding) {
    hightLight(el, binding)
  }
})

export default window.onload = function () {
     hh
}

大致代码就是这样的。