Vue 建立輸入自動完成(autocomplete)

參考資料：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)功能的輸入欄囉～