Update ForceSelectionDoc.vue

doc/autocomplete/ForceSelectionDoc.vue

@@ -6,39 +6,56 @@
         </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
+        <AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
     </div>
-    <DocSectionCode :code="code" />
+    <DocSectionCode :code="code" :service="['CountryService']" />
 </template>
 
 <script>
+import { CountryService } from '@/service/CountryService';
+
 export default {
     data() {
         return {
-            value: '',
+            countries: null,
-            items: [],
+            selectedCountry: null,
+            filteredCountries: null,
             code: {
                 basic: `
-<AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
+<AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
+        <AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
     </div>
 </template>
 
 <script>
+import { CountryService } from '@/service/CountryService';
+
 export default {
     data() {
         return {
-            value: '',
+            countries: null,
-            items: []
+            selectedCountry: null,
+            filteredCountries: null
         };
     },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
     methods: {
         search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
         }
     }
 };
@@ -47,27 +64,53 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
+        <AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
     </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import { CountryService } from "@/service/CountryService";
+
+onMounted(() => {
+    CountryService.getCountries().then((data) => (countries.value = data));
+});
+
+const countries = ref();
+const selectedCountry = ref();
+const filteredCountries = ref();
 
-const value = ref("");
-const items = ref([]);
 
 const search = (event) => {
-    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+    setTimeout(() => {
+        if (!event.query.trim().length) {
+            filteredCountries.value = [...countries.value];
+        } else {
+            filteredCountries.value = countries.value.filter((country) => {
+                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+            });
+        }
+    }, 250);
 }
 <\/script>
 `
             }
         };
     },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
     methods: {
         search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
         }
     }
 };