Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
在解決問題之道上不斷前行
參考資料:https://stevencotterill.com/articles/how-to-build-an-autocomplete-field-with-vue-3
紀錄在 Vue3 中建立自動完成(autocomplete)功能的基礎作法。我先假設是一個關於不同國家的輸入欄。
首先,我們需要一個國家名稱的數。在這個例子中,我們將使用一個靜態的 JSON 文件 countries.json,其中包含了一系列國家名稱:countries.json
[
{"name": "Albania"},
{"name": "Åland Islands"},
{"name": "Algeria"},
{"name": "American Samoa"},
{"name": "Andorra"},
{"name": "Angola"},
{"name": "Anguilla"},
{"name": "Antarctica"},
{"name": "Antigua and Barbuda"},
{"name": "Argentina"},
{"name": "Armenia"},
{"name": "Aruba"},
{"name": "Australia"},
{"name": "Austria"},
]
接著,我們在 Vue 組件中建立一個輸入框,可以取得使用者輸入
<input
type="text"
id="search"
v-model="searchTerm"
placeholder="Type here..."
class="p-3 mb-0.5 w-full border border-gray-300 rounded"
>
當使用者開始輸入時,我們希望顯示一個下拉選單列出文件中的國家名稱。
<ul
v-if="searchCountries.length"
class="w-full rounded bg-white border border-gray-300 px-4 py-2 space-y-1 absolute z-10"
>
<li class="px-1 pt-1 pb-2 font-bold border-b border-gray-200">
Showing {{ searchCountries.length }} of {{ countries.length }} results
</li>
<li
v-for="country in searchCountries"
:key="country.name"
@click="selectCountry(country.name)"
class="cursor-pointer hover:bg-gray-100 p-1"
>
{{ country.name }}
</li>
</ul>
為了配對國家,使用一個函式 searchCountries,它根據目前的 searchTerm 篩選國家列表:
//輸入的資料
let searchTerm = ref('')
//即時檢查輸入資料與偵測資料的 computed
const searchCountries = computed(() => {
if (searchTerm.value === '') {
return []
}
let matches = 0
return countries.filter(country => {
if (country.name.toLowerCase().includes(searchTerm.value.toLowerCase()) && matches < 10) {
matches++
return country
}
})
});
這樣基本上就可以建立一個有自動完成(autocomplete)功能的輸入欄囉~