[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-vue3-建立輸入自動完成autocomplete":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":17,"minRead":18},3738,"vue3-建立輸入自動完成autocomplete","Vue3 建立輸入自動完成(autocomplete)","Vue 建立輸入自動完成(autocomplete) 參考資料：https:\u002F\u002Fstevencotterill […]","\u003Ch1>Vue 建立輸入自動完成(autocomplete)\u003C\u002Fh1>\n\u003Cp>參考資料：\u003Ca href=\"https:\u002F\u002Fstevencotterill.com\u002Farticles\u002Fhow-to-build-an-autocomplete-field-with-vue-3\">https:\u002F\u002Fstevencotterill.com\u002Farticles\u002Fhow-to-build-an-autocomplete-field-with-vue-3\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>紀錄在 Vue3 中建立自動完成(autocomplete)功能的基礎作法。我先假設是一個關於不同國家的輸入欄。\u003C\u002Fp>\n\u003Ch2>準備國家資料\u003C\u002Fh2>\n\u003Cp>首先，我們需要一個國家名稱的數。在這個例子中，我們將使用一個靜態的 JSON 文件 countries.json，其中包含了一系列國家名稱：\u003Cstrong>countries.json\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">[\n  {"name": "Albania"},\n  {"name": "Åland Islands"},\n  {"name": "Algeria"},\n  {"name": "American Samoa"},\n  {"name": "Andorra"},\n  {"name": "Angola"},\n  {"name": "Anguilla"},\n  {"name": "Antarctica"},\n  {"name": "Antigua and Barbuda"},\n  {"name": "Argentina"},\n  {"name": "Armenia"},\n  {"name": "Aruba"},\n  {"name": "Australia"},\n  {"name": "Austria"},\n]\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>建立輸入元件\u003C\u002Fh2>\n\u003Cp>接著，我們在 Vue 組件中建立一個輸入框，可以取得使用者輸入\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><input\n  type="text"\n  id="search"\n  v-model="searchTerm"\n  placeholder="Type here..."\n  class="p-3 mb-0.5 w-full border border-gray-300 rounded"\n>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>實現自動完成下拉菜單\u003C\u002Fh2>\n\u003Cp>當使用者開始輸入時，我們希望顯示一個下拉選單列出文件中的國家名稱。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><ul\n  v-if="searchCountries.length"\n  class="w-full rounded bg-white border border-gray-300 px-4 py-2 space-y-1 absolute z-10"\n>\n  <li class="px-1 pt-1 pb-2 font-bold border-b border-gray-200">\n    Showing {{ searchCountries.length }} of {{ countries.length }} results\n  <\u002Fli>\n  <li\n    v-for="country in searchCountries"\n    :key="country.name"\n    @click="selectCountry(country.name)"\n    class="cursor-pointer hover:bg-gray-100 p-1"\n  >\n    {{ country.name }}\n  <\u002Fli>\n<\u002Ful>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>取得配對成功的國家\u003C\u002Fh2>\n\u003Cp>為了配對國家，使用一個函式 searchCountries，它根據目前的 searchTerm 篩選國家列表：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F輸入的資料\nlet searchTerm = ref('')\n\n\u002F\u002F即時檢查輸入資料與偵測資料的 computed\nconst searchCountries = computed(() => {\n  if (searchTerm.value === '') {\n    return []\n  }\n\n  let matches = 0\n\n  return countries.filter(country => {\n    if (country.name.toLowerCase().includes(searchTerm.value.toLowerCase()) && matches < 10) {\n      matches++\n      return country\n    }\n  })\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>完成\u003C\u002Fh2>\n\u003Cp>這樣基本上就可以建立一個有自動完成(autocomplete)功能的輸入欄囉～\u003C\u002Fp>\n","2024-04-22T10:34:29","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F11%2F256px-Vue.js_Logo_2.svg_.png",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15],{"name":16,"slug":16},"vue","\u002Fblog\u002Fvue3-建立輸入自動完成autocomplete",1]