Vue el-autocomplete遠程搜索下拉框并實現(xiàn)自動填充功能(推薦)
官網(wǎng)的demo獻上
在elementui Input輸入框中可以找到遠程搜索組件，獲取服務端的數(shù)據(jù)
官網(wǎng)中的數(shù)據(jù)list都是寫在loadAll()中的，而如果我們此時要用到mock的數(shù)據(jù)就要在此基礎上對代碼進行修改。
-mock數(shù)據(jù)的獲取-
我們要獲取遠程mock中所有學生的學號信息，根據(jù)輸入的數(shù)據(jù)來遠程查找目標，并且在選中該目標后能夠自動填充對應的姓名、生日、手機等信息，實現(xiàn)快速獲取信息的功能，再也不用手動一個個去輸入所有的數(shù)據(jù)啦～
在template中添加el-autocomplete
<el-autocomplete placeholder="請輸入studentID" v-model="form.studentID" :fetch-suggestions="querySearchAsync" @select="handleSelect" > </el-autocomplete>
在script中添加以下函數(shù)
//queryString 為在框中輸入的值
//cb 回調函數(shù)，將處理好的數(shù)據(jù)推回
querySearchAsync(queryString, cb) {
var studentBasic = this.studentBasic;
console.log(studentBasic)
var results = queryString ? studentBasic.filter(this.createStateFilter(queryString)) : studentBasic;
console.log('results '+results)
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 0.5*1000);
},
//根據(jù)輸入的字段進行篩選
createStateFilter(queryString) {
return (state) => {
return (state.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
//將其他數(shù)據(jù)自動補全，采用覆蓋的方法
handleSelect(item){
this.form.name = item.name;
this.form.studentID = item.value;
this.form.birth = item.birthday;
this.form.region = item.city;
this.form.phone = item.phone;
}
選中目標學號以后自動補全其他mock的數(shù)據(jù)
-
-踩坑點之value字段-
看了網(wǎng)上很多demo都說后臺獲取的數(shù)據(jù)對象必須有value關鍵字，因為autocomplete只識別value字段，這里有一個實現(xiàn)的小trick：
this.studentBasic= JSON.parse(JSON.stringify(this.list).replace(/studentID/g,"value"));
JSON.stringify() 方法是將一個JavaScript值(對象或者數(shù)組)轉換為一個 JSON字符串，如果指定了replacer是一個函數(shù)，則可以替換值，或者如果指定了replacer是一個數(shù)組，可選的僅包括指定的屬性。這樣我們就可以把自己的屬性都替換成value字段啦～cool
總結
以上所述是小編給大家介紹的Vue el-autocomplete遠程搜索下拉框并實現(xiàn)自動填充功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這篇文章主要介紹了如何用vue設計一個數(shù)據(jù)采集器，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要給大家介紹了關于vue組件文檔（.md）中如何自動導入示例（.vue）的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
本文介紹了雙Token機制在Vue3應用中的實現(xiàn),包括登錄/注冊、請求攔截、響應攔截、Token存儲、退出登錄等流程,重點是Token的刷新邏輯和安全性2025-03-03
vue3?keep-alive實現(xiàn)tab頁面緩存功能
如何在我們切換tab標簽的時候，緩存標簽最后操作的內(nèi)容，簡單來說就是每個標簽頁中設置的比如搜索條件及結果、分頁、新增、編輯等數(shù)據(jù)在切換回來的時候還能保持原樣，這篇文章介紹vue3?keep-alive實現(xiàn)tab頁面緩存功能，感興趣的朋友一起看看吧2023-04-04
這篇文章主要介紹了vue項目中如何將數(shù)據(jù)導出為word文檔問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
條件渲染是根據(jù)條件的真假來有條件地渲染元素,在Vue.js 3.x中,常見的條件渲染包括使用v-if指令和v-show指令,本文講解使用v-if指令進行條件渲染,需要的朋友可以參考下2024-03-03
vue 中常用操作數(shù)組的方法(forEach()和reduce())
文章介紹了JavaScript中常用的操作數(shù)組方法,包括forEach()和reduce(),forEach()用于遍歷數(shù)組并對每個元素執(zhí)行操作,而reduce()則用于遍歷數(shù)組并進行累加等迭代操作,感興趣的朋友一起看看吧2025-03-03
在前端開發(fā)中,部署項目是我們經(jīng)常發(fā)生的事情,下面這篇文章主要給大家介紹了關于部署vue項目到docker的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
vue-treeselect無法點擊問題(點擊無法出現(xiàn)拉下菜單)
這篇文章主要介紹了vue-treeselect無法點擊問題(點擊無法出現(xiàn)拉下菜單)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇vue.js與后臺數(shù)據(jù)交互的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08