vue中使用element ui的input框做一个带模糊搜索的输入框

说不多说直接贴代码,在template里面：

    <el-autocomplete
            class="inline-input"
            v-model="disease"
            :fetch-suggestions="querySearch"
            placeholder="请输入疾病名称"
            :trigger-on-focus="false"   //这个改为true就是激活即列出输入建议
            @select="handleSelect"
            @keyup.enter.native="search"
          ></el-autocomplete>

在data里面：

    data () {
        return {
          diseaseList: [], //这个值是需要匹配的值
          disease: ''     //这个值是用户正在输入的值
        }
      }

在mounted里面
这里主要是给diseaseList赋值，这个准备用来匹配用户输入的值disease是否与diseaseList相同。

       mounted () {
            getDiseaseMainSetting().then(res => {
              if (res.code === 200) {
                res.data.forEach(item => {
                  this.diseaseList.push({
                    id: item.icdMainId,
                    value: item.icdMainName
                  })
                })
              }
            })
          },

在methods里面

    /* fetch-suggestions 是一个返回输入建议的方法属性，在该方法中你可以在输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中. */
        querySearch (queryString, cb) {
          const diseaseList = this.diseaseList
          const results = queryString
            ? diseaseList.filter(this.createFilter(queryString))
            : diseaseList
          // 调用 callback 返回建议列表的数据
          cb(results)
        },
        createFilter (queryString) {
          return disease => {
            return (
           disease.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1  // 改为===0 就是筛选的数据只是首字匹配的列表项，需要包含输入字的所有列表项改为！==-1
            )
          }
        },
        /* 跳转并传值 */
        handleSelect (item) {
          if (this.$route.path === '/clinicalAnalysis') {
            this.$router.push({
              path: '/effectAnalysis',
              query: { keyword: this.disease, id: item.id }
            })
          }
        },
        handleIconClick (ev) {
          console.log(ev)
        }
      }

如果需要加一个点击确认的按钮，方法类似，代码如下：

    <el-button type="primary" @click="search">搜索</el-button>

方法如下：

      search () {
             if (!this.disease) {
               this.$message.warning('请输入您要搜索疾病的名称')
               return
             }
             /* 跳转并传值 */
             if (this.$route.path === '/clinicalAnalysis') {
               let diseaseMess = []
               this.diseaseList.forEach((item, index) => {
                 if (this.disease === item.value) {
                   diseaseMess.push(item.value)
                   this.$router.push({
                     path: '/effectAnalysis',
                     query: { keyword: this.disease, id: item.id }
                   })
                 }
               })
               // 判断一下，如果该长度为0的话，那就证明输入的内容和列表的内容不一样。
               if (diseaseMess.length === 0) {
                 this.$message.warning('未配置“' + this.disease + '”该病种')
               }
             } else {
               let keywords = []
               let errorMess = []
               this.diseaseList.forEach(item => {
                 if (this.disease === item.value) {
                   errorMess.push(item.value)
                   keywords.push({
                     name: item.value,
                     id: item.id
                   })
                 }
               })
               if (errorMess.length === 0) {
                 this.$message.warning('未配置“' + this.disease + '”该病种')
               }
               this.$emit('keywords', keywords)
             }
           },

部分解释


效果如下：