element帶輸入建議el-autocomplete的使用
vue+element UI
element UI的帶輸入建議官方文檔:https://element.eleme.cn/#/zh-CN/component/input
建議先看官方文檔,這里是官方文檔的適當(dāng)補(bǔ)充
引用el-autocomplete
1、在需要的地方引用
<el-autocomplete ? ? ? class="inline-input" ? ? ? v-model="inputValue" ? ? ? :fetch-suggestions="querySearch" ? ? ? placeholder="請輸入內(nèi)容" ? ? ? @select="handleSubmit" ? ? ></el-autocomplete>
v-model="inputValue" :與inputValue綁定值,也就是說,自動輸入建議的值可以通過inputValue拿到。
:fetch-suggestions="querySearch" : 返回輸入建議的方法,也就是說輸入框一獲取焦點(diǎn)。就會自動調(diào)用該方法拿到數(shù)據(jù),這些數(shù)據(jù)就是輸入建議的數(shù)據(jù)。
@select="handleSelect" : 當(dāng)選中建議項時,調(diào)用該方法。
2 、
<script> export default { ? name: "searchBar", ? //allInfos是父組件傳來的值,如果allInfos不是父組件傳來的就不用這樣寫 ? props: ["allInfos"], ? data() { ? ? return { ? ? ? inputValue: "", ? ? }; ? }, ? ? methods: { ? ? handleSubmit() { ? ? ?//根據(jù)自身情況 ? ? ?//該方法是提交時觸發(fā) ? ? }, ? ? //輸入框獲取焦點(diǎn)時調(diào)用的方法 ? ? querySearch(queryString, cb) { ? ? //allInfos是怎么來,是從父組件傳過來的還是在自己組件調(diào)用api接口拿到的還是其他 ? ? //我這里的allInfos是從父組件傳過來的,在這里也舉例子組件從父組件傳值 ? ? ? let results = this.allInfos; ? ? ? results = queryString ? ? ? ? ? results.filter(this.createFilter(queryString)) ? ? ? ? : results; ? ? //cb是回調(diào)函數(shù),返回篩選出的結(jié)果數(shù)據(jù)到輸入框下面的輸入列表 ? ? ? cb(results); ? ? }, ? ? //該方法仿寫官方文檔,如果沒有特別的需求,該方法改動不大 ? ? //這是當(dāng)輸入數(shù)據(jù)時觸發(fā)的,篩選出和輸入數(shù)據(jù)匹配的建議輸入。 ? ? //我這里用的是調(diào)用match方法,是模糊匹配;官方調(diào)用的是indexOf,是精確匹配,看自身情況選擇 ? ? createFilter(queryString) { ? ? ? return (item) => { ? ? ? ? return item.value.toUpperCase().match(queryString.toUpperCase()); ? ? ? }; ? ? }, ? }, }; </script>
觸發(fā)帶輸入建議的兩種方式
1.輸入框獲取焦點(diǎn)時就觸發(fā)
這是默認(rèn)的
2.輸入值后匹配觸發(fā)
在組件上加上:trigger-on-focus="false"
<el-autocomplete ? ? ? class="inline-input" ? ? ? v-model="inputValue" ? ? ? :fetch-suggestions="querySearch" ? ? ? :trigger-on-focus="false" ? ? ? placeholder="請輸入內(nèi)容" ? ? ? @select="handleSubmit" ? ? ></el-autocomplete>
轉(zhuǎn)成輸入建議回調(diào)的數(shù)據(jù)結(jié)構(gòu)
大家也看到了文檔里面,回調(diào)的數(shù)據(jù)結(jié)果,是一個數(shù)組,數(shù)組的每一項是一個對象,對象里一定要有一個value的屬性,這些是必須的。如果數(shù)據(jù)結(jié)構(gòu)不長這樣,那么待輸入建議的數(shù)據(jù)是無法渲染出來的。
[ ? ? ? ? ? { "value": "xxx(在輸入建議看到的值,必需)", "address": "看自身情況" }, ]
那么問題來了,如果拿出來的數(shù)據(jù)不是這樣結(jié)構(gòu),該怎么辦?以我的情況舉個例子。
我拿到的數(shù)據(jù)是這樣的,雖然也是數(shù)組,但是數(shù)組里的對象屬性不一樣。
this.modelInfos= [ ? ? ? ? ? { "modelId": "1", "modelName": "a1",type:"c" }, ? ? ? ? ? { "modelId": "2", "modelName": "a2",type:"c" }, ? ? ? ? ? { "modelId": "3", "modelName": "a3",type:"c" }, ? ? ? ? ? { "modelId": "4", "modelName": "a4",type:"c" }, ]
用map返回想要的數(shù)據(jù)結(jié)構(gòu)。
?this.allInfos= this.modelInfos.map((terminal) => { ? ? ? ? return { ? ? ? ? ? value: modelName, ? ? ? ? ? name: modelId, ? ? ? ? }; ? ? ? });
可以log打印一下,就會發(fā)現(xiàn)allInfos的結(jié)構(gòu)就變成了想要的亞子。
增加回車觸發(fā)事件
在組件里增加 @keyup.enter.native方法
<el-autocomplete ? ? ? class="inline-input" ? ? ? v-model="inputValue" ? ? ? :fetch-suggestions="querySearch" ? ? ? :trigger-on-focus="false" ? ? ? placeholder="請輸入內(nèi)容" ? ? ? @select="handleSubmit" ? ? ? @keyup.enter.native="handleSubmit" ? ? ></el-autocomplete>
解決回車后建議輸入框沒消失的bug
如果增加了回車事件,那么輸入數(shù)據(jù)回車后,輸入建議框沒有自動消失,該如何解決?
在組件又增加方法:@input(在輸入值發(fā)生改變的時候觸發(fā)changeStyle方法)
@keyup(按鍵松開觸發(fā)的事件,也就是回車時觸發(fā)changeStyle方法)
傳入的“block”是讓輸入框建議展開,'.el-autocomplete-suggestion'是輸入建議框的類名
<el-autocomplete ? ? ? class="inline-input" ? ? ? v-model="inputValue" ? ? ? :fetch-suggestions="querySearch" ? ? ? :trigger-on-focus="false" ? ? ? placeholder="請輸入內(nèi)容" ? ? ? @select="handleSubmit" ? ? ? @keyup.enter.native="handleSubmit" ? ? ? @input="changeStyle('block', '.el-autocomplete-suggestion')" ? ? ? @keyup="changeStyle('block', '.el-autocomplete-suggestion')" ? ? ></el-autocomplete> ? ? //根據(jù)傳進(jìn)來的狀態(tài)改變建議輸入框的狀態(tài)(展開|隱藏) ? ? changeStyle(status, className) { ? ? ? let dom = document.querySelectorAll(className); ? ? ? dom[0].style.display = status; ? ? },
在handleSubmit的時候調(diào)用changeStyle方法,傳入的狀態(tài)為none(表示讓輸入建議框隱藏)
handleSubmit() { ? ? ? this.changeStyle("none", ".el-autocomplete-suggestion"); ? ? ? ? },
到此這篇關(guān)于element帶輸入建議el-autocomplete的使用的文章就介紹到這了,更多相關(guān)element el-autocomplete內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue axios 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址(推薦)
這篇文章主要介紹了vue axios 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-05-05解決VUE項目使用Element-ui 下拉組件的驗證失效問題
這篇文章主要介紹了解決VUE項目使用Element-ui 下拉組件的驗證失效問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11Vue+Vite項目初建(axios+Unocss+iconify)的實現(xiàn)
一個好的項目開始搭建總是需要配置許多初始化配置,本文就來介紹一下Vue+Vite項目初建(axios+Unocss+iconify)的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-02-02vue集成高德地圖amap-jsapi-loader的實現(xiàn)
本文主要介紹了vue集成高德地圖amap-jsapi-loader的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06使用Vant完成DatetimePicker 日期的選擇器操作
這篇文章主要介紹了使用Vant完成DatetimePicker 日期的選擇器操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11