如圖所示，當你輸入某個關鍵字時，去掉用某個接口，然后通過關鍵字獲取數據。

---

View Code

<el-autocompleteclass="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` 表示有該關鍵字的都可以匹配到

總結

以上是生活随笔為你收集整理的element UI 制作模糊搜索框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。