目錄
1.基本使用
①從官網賦值如下代碼
②查看運行效果
③代碼解讀
2.調用后端接口，動態獲取建議數據
結語
1.基本使用
①從官網賦值如下代碼
<template>
<div><!-- 自動補全輸入框 --><el-autocompletev-model="state":fetch-suggestions="querySearch":trigger-on-focus="false"clearablestyle="width:300px;"placeholder="請輸入內容"@select="handleSelect"/></div>
</template><script setup>
import { onMounted, ref } from 'vue';//動態綁定自動補全輸入框的值
const state = ref('');//存儲建議列表的數據源，初始為空數組。
const restaurants = ref([]);//根據用戶輸入的內容（queryString）過濾建議列表。如果用戶沒有輸入內容，則返回所有建議項。調用 cb(results) 將過濾后的結果傳給 el-autocomplete 組件。
const querySearch = (queryString, cb) => {const results = queryString? restaurants.value.filter(createFilter(queryString)): restaurants.value;cb(results);
};//創建一個過濾器函數，用于匹配用戶輸入的內容。檢查建議項的 value 是否以用戶輸入的內容開頭（不區分大小寫）。
const createFilter = (queryString) => {return (restaurant) => {return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;};
};//自定義函數loadAll，用來返回輸入框自動補全時建議的數據
const loadAll = () => {//所有可能匹配的選項。（注意：每一個選項都是一個對象，構成這個對象數組）return [{ value: 'vue' },{ value: 'element' },{ value: 'cooking' },{ value: 'mint-ui' },{ value: 'vuex' },{ value: 'vue-router' },{ value: 'babel' },];
};//選中自動輸入框的建議時，觸發的事件
const handleSelect = (item) => {//item是我們選中的建議中的那個選項（是一個對象）alert(JSON.stringify(item));
};//element-plus組件加載完成后，調用 loadAll函數 初始化 restaurants 數據（我們可以在這個函數內，發送axios請求后端，獲取數據，此時就不需要通過loadAll函數來獲取數據了）
onMounted(() => {restaurants.value = loadAll();
});
</script><style scoped></style>②查看運行效果
③代碼解讀
2.調用后端接口，動態獲取建議數據
編寫后端接口，返回一個對象數組：
修改js代碼：
展示效果：
結語
以上就是element-plus中Autocomplete自動補全輸入框組件的使用。
喜歡本篇文章的話，可以留個免費的關注~~
?
)
