vue+element uiinput输入框实时搜索（输入框搜索功能，模糊查询）+下拉展示+点击定位菜单项高亮并显示对应内容

LXXgalaxy

已于 2024-02-26 09:37:26 修改

阅读量1.7k

点赞数 2

于 2024-02-23 14:54:40 首次发布

本文链接：https://blog.csdn.net/galaxyJING/article/details/136256323

版权

vue 同时被 3 个专栏收录

44 篇文章 2 订阅

订阅专栏

javascript

39 篇文章 0 订阅

订阅专栏

elementUI

14 篇文章 1 订阅

订阅专栏

<el-row class="content-wrapper">
   <el-col :md="24" :xs="24">
        <el-autocomplete
         class="inputInfo"
          v-model="searchcursom"
          value-key="fVcHelpCenterName"
          :fetch-suggestions="querySearch"
           :trigger-on-focus="false"
          placeholder="请输入内容"
          @select="handleSelect"
        ></el-autocomplete>
      </el-col>
</el-row>
//数据
 data() {
    return {
      menus: [],
      subMenuList: [],
      openKeys: [],
      selectedKeys:[],     
      markDownTxt: '',
      searchcursom: '',      
      helpList:[],
    }
  },
//js方法
     querySearch(queryString, cb) {
     if(queryString=='') return   //如果输入框无内容，不调接口
        getHelpByquery({ keyWord: queryString }).then((res) => {
        if (res && res.code == 0) {
      //传关键字后返回的结果就是筛选后的
         this.helpList = res.data
         var helpList = this.helpList;
          var results = queryString ? helpList.filter(this.createFilter(queryString)) : helpList;    
          // 调用 callback 返回建议列表的数据
          cb(results );
        }
      })
      },
       createFilter(queryString) {
        return (item) => {       
        return (item.fVcHelpCenterName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };//fVcHelpCenterName是接口返回的名称和输入的名称做对比
      },
      //下拉点击之后，把id传给menu的selectedKeys 数组，实现定位高亮效果，调用菜单的点击事件，实现显示对应内容
       handleSelect(item) {       
        let arr = []
        arr.push(item.fPkHelpCenterId)
        this.selectedKeys = arr
        this.onMenuSelected(item)
      },