vue.js中实现输入框可选可输入模糊匹配下拉框数据关键字高亮满足简拼匹配，全拼匹配，中文匹配三种方式

<el-input
            class="query must-bakcground"
            v-model="queryForm.michead"
            :placeholder="
              $t('message.forecastParcel.qingxuanzekuaidigongsi')
            "
            @focus="focusmichead"
            @blur="blurmichead"
            @input="inputmichead(queryForm.michead)"
          ></el-input>
          <transition name="el-zoom-in-top">
            <div class="michead-list" v-if="CompanYvisable">
              <div class="arrow"></div>
              <ul>
                <li
                  v-for="(item, index) in queryCompany"
                  :key="index"
                  @click="CompanyBtn(item.description)"
                  v-html="item.description"
                ></li>
              </ul>
            </div>
          </transition>

这里是引入第三方的插件通过对下下拉框数据进行检索，找到相关的字符
import pinyinMatch from “pinyin-match”;

这几个是定义在data里面的变量
expressCompany: [],
queryCompany: [],
temporary: [],
CompanYvisable: false,

获取焦点
focusmichead: function () {
      this.CompanYvisable = true;
     这里的参数val是你输入框上绑定的值
      this.busFuzzyMatching(this.queryForm.michead);
    },

    blurmichead: function () {
      setTimeout(() => {
        this.CompanYvisable = false;
      }, 200);
    },

	输入框输入事件
    inputmichead: function (val) {
      this.busFuzzyMatching(val);
    },
	
	//模糊匹配公方法
    busFuzzyMatching: function (val) {
      if (val != "") {
        this.queryCompany = [];
        this.temporary = [];
        let list = JSON.stringify(this.expressCompany);
        let arr = JSON.parse(list);
        arr.forEach((item) => {
          if (
            item.description.indexOf(val) != -1 ||
            item.desc_qp.indexOf(val) != -1 ||
            item.desc_jp.indexOf(val) != -1
          ) {
            this.temporary.push(item);
          }
        });
        if (this.temporary.length != 0) {
          this.temporary.forEach((item) => {
            item.description = item.description.replace(/<.*?>/gi, "");
            item.desc_qp = item.desc_qp.replace(/<.*?>/gi, "");
            item.desc_jp = item.desc_jp.replace(/<.*?>/gi, "");
          });
        }
        this.queryCompany = this.temporary;
        this.queryCompany = [...new Set(this.queryCompany)];
        this.changeColor(this.queryCompany);
      } else {
        this.queryCompany = this.expressCompany;
        this.temporary = [];
      }
    },
	
	下拉框数据点击事件
    CompanyBtn: function (val) {
      this.queryForm.michead = val.replace(/<.*?>/gi, "");
    },

	//模糊匹配高亮的方法
    changeColor(resultsList) {
      if (resultsList && resultsList.length > 0) {
        resultsList.map((item, index) => {
          item.coordinate = pinyinMatch.match(
            item.description,
            this.queryForm.michead
          );

          // 匹配关键字正则
          item.keyscord = item.description.substr(
            item.coordinate[0],
            item.coordinate[1] + 1
          );
          item.replaceReg = new RegExp(item.keyscord, "g");
          item.replaceString =
            '<span style="color:#ff6600;">' + item.keyscord + "</span>";

          if (this.queryForm.michead && this.queryForm.michead.length > 0) {
            item.description = item.description.replace(
              item.replaceReg,
              item.replaceString
            );
          }
        });
        this.queryCompany = resultsList;
        console.log(resultsList);
      } else {
        this.queryCompany = [];
      }
    },