溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
官網的demo獻上
在elementui Input輸入框中可以找到遠程搜索組件，獲取服務端的數據
官網中的數據list都是寫在loadAll()中的，而如果我們此時要用到mock的數據就要在此基礎上對代碼進行修改。
-mock數據的獲取-
我們要獲取遠程mock中所有學生的學號信息，根據輸入的數據來遠程查找目標，并且在選中該目標后能夠自動填充對應的姓名、生日、手機等信息，實現快速獲取信息的功能，再也不用手動一個個去輸入所有的數據啦～
在template中添加el-autocomplete
<el-autocomplete placeholder="請輸入studentID" v-model="form.studentID" :fetch-suggestions="querySearchAsync" @select="handleSelect" > </el-autocomplete>
在script中添加以下函數
//queryString 為在框中輸入的值
//cb 回調函數，將處理好的數據推回
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);
},
//根據輸入的字段進行篩選
createStateFilter(queryString) {
return (state) => {
return (state.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
//將其他數據自動補全，采用覆蓋的方法
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的數據
-
-踩坑點之value字段-
看了網上很多demo都說后臺獲取的數據對象必須有value關鍵字，因為autocomplete只識別value字段，這里有一個實現的小trick：
this.studentBasic= JSON.parse(JSON.stringify(this.list).replace(/studentID/g,"value"));
JSON.stringify() 方法是將一個JavaScript值(對象或者數組)轉換為一個 JSON字符串，如果指定了replacer是一個函數，則可以替換值，或者如果指定了replacer是一個數組，可選的僅包括指定的屬性。這樣我們就可以把自己的屬性都替換成value字段啦～cool
總結
以上所述是小編給大家介紹的Vue el-autocomplete遠程搜索下拉框并實現自動填充功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
