vue中使用element ui的input框實現模糊搜索的輸入框

更新時間：2023年11月22日 10:50:10 作者：前端李小白

這篇文章主要介紹了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)
             }
           },

部分解釋

在這里插入圖片描述