element UI 製作模糊搜尋框
阿新 • • 發佈:2018-12-13
如圖所示,當你輸入某個關鍵字時,去掉用某個介面,然後通過關鍵字獲取資料。
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
表示有該關鍵字的都可以匹配到