快捷導(dǎo)航

Vue el-autocomplete遠(yuǎn)程搜索下拉框并實現(xiàn)自動填充功能(推薦)

更新時間：2019年10月25日 11:33:57 作者：weixin_43824717

在elementui Input輸入框中可以找到遠(yuǎn)程搜索組件，獲取服務(wù)端的數(shù)據(jù)。這篇文章主要給大家介紹Vue el-autocomplete遠(yuǎn)程搜索下拉框并實現(xiàn)自動填充功能，感興趣的朋友一起看看吧

官網(wǎng)的demo獻上

在elementui Input輸入框中可以找到遠(yuǎn)程搜索組件，獲取服務(wù)端的數(shù)據(jù)

在這里插入圖片描述

官網(wǎng)中的數(shù)據(jù)list都是寫在loadAll()中的，而如果我們此時要用到mock的數(shù)據(jù)就要在此基礎(chǔ)上對代碼進行修改。

-mock數(shù)據(jù)的獲取-

我們要獲取遠(yuǎn)程mock中所有學(xué)生的學(xué)號信息，根據(jù)輸入的數(shù)據(jù)來遠(yuǎn)程查找目標(biāo)，并且在選中該目標(biāo)后能夠自動填充對應(yīng)的姓名、生日、手機等信息，實現(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 回調(diào)函數(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;
 }

選中目標(biāo)學(xué)號以后自動補全其他mock的數(shù)據(jù)

在這里插入圖片描述 -

-踩坑點之value字段-

看了網(wǎng)上很多demo都說后臺獲取的數(shù)據(jù)對象必須有value關(guān)鍵字，因為autocomplete只識別value字段，這里有一個實現(xiàn)的小trick：

this.studentBasic= JSON.parse(JSON.stringify(this.list).replace(/studentID/g,"value"));

JSON.stringify() 方法是將一個JavaScript值(對象或者數(shù)組)轉(zhuǎn)換為一個 JSON字符串，如果指定了replacer是一個函數(shù)，則可以替換值，或者如果指定了replacer是一個數(shù)組，可選的僅包括指定的屬性。這樣我們就可以把自己的屬性都替換成value字段啦～cool

總結(jié)

以上所述是小編給大家介紹的Vue el-autocomplete遠(yuǎn)程搜索下拉框并實現(xiàn)自動填充功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: