【vue+element ui】select实时搜索模糊查询，匹配文字高亮显示，下拉选中定位菜单高亮并显示对应内容（效果同input输入框实时搜索）

参考element ui select的远程搜索

对应属性的解释

 <el-select
          class="inputInfo"
          v-model="searchcursom"
          filterable
          clearable
          remote
          placeholder="搜索内容"
          :remote-method="querySearch"
          @change="handleSelect"
          :loading="loading"
         @clear="removeclear"

        >
          <template slot="prefix">//输入框前搜索图标和后搜索文字
            <i class="el-icon-search prefixSearch"></i>
            <span class="prefixSpan">搜索</span>
          </template>
          <el-option
            v-for="item in helpList"
            :disabled="item.disabled"
            :key="item.fPkHelpCenterId"
            :label="item.fVcHelpCenterName"
            :value="item.fPkHelpCenterId"
          >
            <div v-html="item.parsename"></div>
          </el-option>
            <div slot="empty" style="height:30px;text-align:center;line-height:30px">无数据</div>//搜不到结果的时候展示对应的文字

        </el-select>

 data() {
    return {   
      menus: [],
      subMenuList: [],
      openKeys: [], 
      searchcursom: '',
      helpList: [],//模糊查询的数组集合
   }
  },

搜索事件

    querySearch(queryString) { 
      if (queryString == '') return (this.helpList = [])  //当无内容的时候，数组为空，不展示下拉列表
      this.loading = true
      this.helpList = []
      getHelpByquery({ keyWord: queryString }).then((res) => {//调接口，拿到模糊查询到的数据
        this.loading = false
        if (res && res.code == 0) {
          this.searchcursom = queryString
          this.helpList = res.data       
          this.setHighlight(this.helpList, queryString) // 匹配文字高亮显示
        }
      })
    },

设置文字高亮

 setHighlight(arr, keyword) {
      if (arr && arr.length > 0 && keyword) {
        arr.unshift({ fPkHelpCenterId: 0, fVcHelpCenterName: '文档名称', disabled: true })//我这里下拉列表有个默认值，
        //如果你不需要可以不加
        arr = arr.filter((item) => {
          let wordname = '文档名称'//可以不加
          let reg = new RegExp(this.searchcursom, 'g')
          let regresult = new RegExp('文档名称', 'g')//可以不加
          let replaceString = `<span style="color:#ff8c00;padding:0">${keyword.trim()}</span>`
          let replaceone = `<span style="color:#ccc;padding:0">${wordname.trim()}</span>`//可以不加
          if (item.fVcHelpCenterName.match(reg)) {
            item.parsename = item.fVcHelpCenterName.replace(reg, replaceString)
            return item
          }    
          if (item.fVcHelpCenterName.match(regresult)) {//可以不加
            item.parsename = item.fVcHelpCenterName.replace(regresult, replaceone)
            return item
          }
        })
        return arr
      }
    },

  removeclear() {
      this.helpList = []
    },

下拉框的点击事件

 handleSelect(fPkHelpCenterId) {
      let arr = []
      arr.push(fPkHelpCenterId)
      this.selectedKeys = arr
      this.onMenuSelected(fPkHelpCenterId)
    },

菜单的点击事件

  onMenuSelected(fPkHelpCenterId) {
      let id = ''
      if (fPkHelpCenterId.length > 0) {
        id = fPkHelpCenterId[0]
      } else {
        id = fPkHelpCenterId
      }
      this.mdSpinning = true
      getHelpById({ fPkHelpCenterId: id })
        .then((res) => {
          if (res) {          
            this.markDownTxt = res.fVcHelpCenterContent || ''
          } else {
            this.markDownTxt = ''
          }
        })
        .catch((err) => {
          this.markDownTxt = ''
        })
        .finally(() => {
          this.mdSpinning = false
        })
    },