element帶輸入建議el-autocomplete的使用
vue+element UI
element UI的帶輸入建議官方文檔：https://element.eleme.cn/#/zh-CN/component/input
建議先看官方文檔，這里是官方文檔的適當(dāng)補充
引用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à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à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.輸入框獲取焦點時就觸發(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ù)傳進來的狀態(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-cli3的正確姿勢，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
better scroll可以實現(xiàn)輪播圖和頁面滾動，是移動端滾動插件，這篇文章主要介紹了vue better scroll 無法滾動的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作示例詳解
在 Vue.js 或其他類似框架中，使用 onMounted 是為了確保在組件掛載后執(zhí)行異步操作，這篇文章主要介紹了Vue使用onMounted確保在組件掛載后執(zhí)行異步操作,需要的朋友可以參考下2023-06-06
如何用electron把vue項目打包為桌面應(yīng)用exe文件
這篇文章主要介紹了如何用electron把vue項目打包為桌面應(yīng)用exe文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue3使用hooks函數(shù)實現(xiàn)代碼復(fù)用詳解
這篇文章主要介紹了Vue3使用hooks函數(shù)實現(xiàn)代碼復(fù)用詳解，Vue3的hook函數(shù)可以幫助我們提高代碼的復(fù)用性,?讓我們能在不同的組件中都利用hooks函數(shù)2022-06-06
vue for循環(huán)出來的數(shù)據(jù)實現(xiàn)用逗號隔開
HTML（HyperText Markup Language）是用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言,正確的HTML編碼和結(jié)構(gòu)對于網(wǎng)頁的正確顯示至關(guān)重要,當(dāng)HTML代碼正確無誤時,網(wǎng)頁的效果圖將與設(shè)計師的預(yù)期相符,反之則可能出現(xiàn)布局錯亂、樣式失效等問題2024-10-10
vue實現(xiàn)在一個方法執(zhí)行完后執(zhí)行另一個方法的示例
今天小編就為大家分享一篇vue實現(xiàn)在一個方法執(zhí)行完后執(zhí)行另一個方法的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Elementui如何限制el-input框輸入小數(shù)點
這篇文章主要介紹了Elementui如何限制el-input框輸入小數(shù)點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)百度下拉提示搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了Vue3.0插件執(zhí)行原理與實戰(zhàn)，Vue項目能夠使用很多插件來豐富自己的功能Vue-Router、Vuex等，節(jié)省了我們大量的人力和物力，下面我們就一起來了解Vue3.0插件的原理吧，需要的小伙伴可以參考一下2022-02-02