快捷導(dǎo)航

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

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

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

官網(wǎng)的demo獻(xiàn)上

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

在這里插入圖片描述

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

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

我們要獲取遠(yuǎn)程mock中所有學(xué)生的學(xué)號(hào)信息，根據(jù)輸入的數(shù)據(jù)來遠(yuǎn)程查找目標(biāo)，并且在選中該目標(biāo)后能夠自動(dòng)填充對(duì)應(yīng)的姓名、生日、手機(jī)等信息，實(shí)現(xiàn)快速獲取信息的功能，再也不用手動(dòng)一個(gè)個(gè)去輸入所有的數(shù)據(jù)啦～

在template中添加el-autocomplete

<el-autocomplete 
 placeholder="請(qǐng)輸入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ù)輸入的字段進(jìn)行篩選
createStateFilter(queryString) {
 return (state) => {
 return (state.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) === 0);
 };
 },

//將其他數(shù)據(jù)自動(dòng)補(bǔ)全，采用覆蓋的方法
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é)號(hào)以后自動(dòng)補(bǔ)全其他mock的數(shù)據(jù)

在這里插入圖片描述 -

-踩坑點(diǎn)之value字段-

看了網(wǎng)上很多demo都說后臺(tái)獲取的數(shù)據(jù)對(duì)象必須有value關(guān)鍵字，因?yàn)閍utocomplete只識(shí)別value字段，這里有一個(gè)實(shí)現(xiàn)的小trick：

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

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

總結(jié)

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

您可能感興趣的文章: