autocomplete

src/components/Home.vue

@@ -7,7 +7,7 @@
       >
         Type the name of a country to search
       </label>
-
+Lenght : {{searchCountries.length}}
       <input
           type="text"
           id="search"
@@ -21,15 +21,15 @@
           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
+          Showing {{ searchCountries.length }}
         </li>
         <li
             v-for="country in searchCountries"
-            :key="country.name"
-            @click="selectCountry(country.name)"
+            :key="country.properties.label"
+            @click="selectCountry(country.properties.label)"
             class="cursor-pointer hover:bg-gray-100 p-1"
         >
-          {{ country.name }}
+          {{ country.properties.label }}
         </li>
       </ul>
 
@@ -44,43 +44,33 @@
 </template>
 
 <script>
-import countries from '../data/countries.json'
-import {ref, computed} from 'vue'
+import {ref, computed, watch} from 'vue'
 export default {
   setup() {
     let searchTerm = ref('')
+    let searchCountries = ref('')
 
     async function addressSearch (query) {
      return await fetch('https://api-adresse.data.gouv.fr/search/?q='+query)
           .then(function (response) {
             return response.json();
           }).then(function (jsonObj) {
-            return jsonObj;
+            return jsonObj.features;
           });
     }
 
-    const searchCountries = computed(() => {
-      if (searchTerm.value === '') {
-        return []
-      }
-
-      console.log(addressSearch)
-      let matches = 0
-
-      return countries.filter(country => {
-        if (country.name.toLowerCase().includes(searchTerm.value.toLowerCase()) && matches < 10) {
-          matches++
-          return country
-        }
+    watch(searchTerm, (selection, prevSelection) => {
+      console.log(selection)
+      searchCountries= addressSearch(searchCountries)
     })
-    });
+
+
     const selectCountry = (country) => {
       selectedCountry.value = country
       searchTerm.value = ''
     }
     let selectedCountry = ref('')
     return {
-      countries,
       searchTerm,
       searchCountries,
       selectCountry,