1. 程式人生 > >element UI 製作模糊搜尋框

element UI 製作模糊搜尋框

在這裡插入圖片描述

如圖所示,當你輸入某個關鍵字時,去掉用某個介面,然後通過關鍵字獲取資料。


View Code

<el-autocomplete
            class="inline-input"
            v-model="form.tName"
            :fetch-suggestions="querySearch"
            placeholder="input teacher name!"
            :trigger-on-focus="false"
            @select="handleSelect">
</el-autocomplete>

JS Code


    // 模糊搜尋 (通過介面拿到資料,將值賦給value,value未模糊匹配搜尋到的值)
    querySearch(queryString, cb) {
      TeacherSalary.getTeacherName({ teacherName: queryString })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.teacherNameList = data;
            this.teacherNameList.forEach((element) => {
              element.value = element.tName;
            });
            const results = queryString ? this.teacherNameList.filter(this.createFilter(queryString)) : this.teacherNameList;
            cb(results);
          }
        })
        .catch(err => err);
    },
    createFilter(queryString) {
      return name => (name.tName.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
    },
    handleSelect(item) {
      this.form.T = item.id;
    }

注意點:

(1)name.tName.toLowerCase().indexOf(queryString.toLowerCase()) === 0 表示從第一個開始匹配
(2)name.tName.toLowerCase().indexOf(queryString.toLowerCase()) > -1 表示有該關鍵字的都可以匹配到