先看效果图，本想制作一个视频展示，无奈不知道本地视频如何上传，没经验，暴风哭泣。。。。。。。。

菜单和markdown的实现就不细说了，主要说这个输入框实时搜索的功能
这里用到的是element官网上带输入建议的输入后匹配输入建议这个

官方示例就不贴那么细了，主要是 :fetch-suggestions="querySearch"和 @select=“handleSelect”

 <el-autocomplete
      class="inline-input"
      v-model="state2"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      :trigger-on-focus="false"
      @select="handleSelect"
    ></el-autocomplete>

还有对应的方法

  querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },

queryString是你输入的内容，cb是回调函数，返回建议列表的数据，相当于帮你实现了模糊查询
querySearch方法中，先拿到数组数据，用三元表达式判断，如果输入内容就过滤数组，没有输入内容就保持原来的不变
createFilter方法中，搜索匹配项

下面是代码展示，后端返我的接口，必传参数是搜索关键字，拿到接口后会返我左侧菜单的id和菜单对应的名称

<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:[],
    }
  },

不需要在created中调用，输入框变化就会调用

     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)
      },