From a8e1ab66777e9c0895ccec5dcc1233d4d21f5dc6 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 1 Jul 2020 14:49:50 +0300
Subject: [PATCH] Updated autocomplete demo

---
 src/views/autocomplete/AutoCompleteDemo.vue |  62 +++--------
 src/views/autocomplete/AutoCompleteDoc.vue  | 110 +++++++-------------
 2 files changed, 56 insertions(+), 116 deletions(-)

diff --git a/src/views/autocomplete/AutoCompleteDemo.vue b/src/views/autocomplete/AutoCompleteDemo.vue
index 0e5a99208..a2364b123 100755
--- a/src/views/autocomplete/AutoCompleteDemo.vue
+++ b/src/views/autocomplete/AutoCompleteDemo.vue
@@ -11,27 +11,21 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
-                <span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
-
+                <AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
                 <h5>Dropdown and Templating</h5>
-                <AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Search car brands" :dropdown="true">
+                <AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name">
                     <template #item="slotProps">
-                        <div class="p-autocomplete-brand-item">
-                            <img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" />
-                            <div>{{slotProps.item}}</div>
+                        <div class="country-item">
+                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" class="p-mr-2" />
+                            <div>{{slotProps.item.name}}</div>
                         </div>
                     </template>
                 </AutoComplete>
-                <span style="marginLeft: .5em">Brand: {{brand || 'none'}}</span>
 
                 <h5>Multiple</h5>
                 <span class="p-fluid">
-                    <AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" />
+                    <AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
                 </span>
-                <ul>
-                    <li v-for="(c,i) of selectedCountries" :key="i">{{c}}</li>
-                </ul>
             </div>
         </div>
 
@@ -47,13 +41,10 @@ export default {
     data() {
         return {
             countries: null,
-            selectedCountry: null,
-            filteredCountriesBasic: null,
-            selectedCountries: [],
-            filteredCountriesMultiple: null,
-            brands: null,
-            brand: null,
-            filteredBrands: null
+            selectedCountry1: null,
+            selectedCountry2: null,
+            filteredCountries: null,
+            selectedCountries: []
         }
     },
     countryService: null,
@@ -62,38 +53,18 @@ export default {
     },
     mounted() {
         this.countryService.getCountries().then(data => this.countries = data);
-        this.brands = ['Audi', 'BMW', 'Fiat', 'Ford', 'Honda', 'Jaguar', 'Mercedes', 'Renault', 'Volvo'];
     },
     methods: {
-        searchCountry(query) {
-            return this.countries.filter((country) => {
-                return country.name.toLowerCase().startsWith(query.toLowerCase());
-            });
-        },
-        searchCountryBasic(event) {
+        searchCountry(event) {
             setTimeout(() => {
-                this.filteredCountriesBasic = this.searchCountry(event.query);
-            }, 250);
-        },
-        searchCountryMultiple(event) {
-            setTimeout(() => {
-               this.filteredCountriesMultiple = this.searchCountry(event.query);
-            }, 250);
-        },
-        searchBrand(event) {
-            setTimeout(() => {
-                let results;
-
-                if (event.query.length === 0) {
-                    results = [...this.brands];
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
                 }
                 else {
-                    results = this.brands.filter((brand) => {
-                        return brand.toLowerCase().startsWith(event.query.toLowerCase());
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
                     });
                 }
-
-                this.filteredBrands = results;
             }, 250);
         }
     },
@@ -104,10 +75,9 @@ export default {
 </script>
 
 <style lang="scss">
-.p-autocomplete-brand-item {
+.country-item {
     display: flex;
     align-items: center;
-    justify-content: space-between;
 
     img {
         width: 28px;
diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
index fdca82dfc..13199106e 100755
--- a/src/views/autocomplete/AutoCompleteDoc.vue
+++ b/src/views/autocomplete/AutoCompleteDoc.vue
@@ -254,28 +254,22 @@ export default {
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;h3&gt;Basic&lt;/h3&gt;
-&lt;AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" /&gt;
-&lt;span style="marginLeft: .5em"&gt;Country: {{selectedCountry || 'none'}}&lt;/span&gt;
-
-&lt;h3&gt;Dropdown and Templating&lt;/h3&gt;
-&lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
+&lt;h5&gt;Basic&lt;/h5&gt;
+&lt;AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /&gt;
+&lt;h5&gt;Dropdown and Templating&lt;/h5&gt;
+&lt;AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name"&gt;
     &lt;template #item="slotProps"&gt;
-        &lt;div class="p-autocomplete-brand-item"&gt;
-            &lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt;
-            &lt;div&gt;{{slotProps.item}}&lt;/div&gt;
+        &lt;div class="country-item"&gt;
+            &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" class="p-mr-2" /&gt;
+            &lt;div&gt;{{slotProps.item.name}}&lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/AutoComplete&gt;
-&lt;span style="marginLeft: .5em"&gt;Brand: {{brand || 'none'}}&lt;/span&gt;
 
-&lt;h3&gt;Multiple&lt;/h3&gt;
+&lt;h5&gt;Multiple&lt;/h5&gt;
 &lt;span class="p-fluid"&gt;
-    &lt;AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" /&gt;
+    &lt;AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /&gt;
 &lt;/span&gt;
-&lt;ul&gt;
-    &lt;li v-for="(c,i) of selectedCountries" :key="i"&gt;{{c}}&lt;/li&gt;
-&lt;/ul&gt;
 </template>
 </CodeHighlight>
 
@@ -283,67 +277,43 @@ export default {
 import CountryService from '../../service/CountryService';
 
 export default {
-	data() {
-		return {
-			countries: null,
-			selectedCountry: null,
-			filteredCountriesBasic: null,
-			selectedCountries: [],
-			filteredCountriesMultiple: null,
-			brands: null,
-			brand: null,
-			filteredBrands: null
-		}
-	},
-	countryService: null,
-	created() {
-		this.countryService = new CountryService();
-	},
-	mounted() {
-		this.countryService.getCountries().then(data => this.countries = data);
-		this.brands = ['Audi', 'BMW', 'Fiat', 'Ford', 'Honda', 'Jaguar', 'Mercedes', 'Renault', 'Volvo'];
-	},
-	methods: {
-		searchCountry(query) {
-			return this.countries.filter((country) => {
-				return country.name.toLowerCase().startsWith(query.toLowerCase());
-			});
-		},
-		searchCountryBasic(event) {
-			setTimeout(() => {
-				this.filteredCountriesBasic = this.searchCountry(event.query);
-			}, 250);
-		},
-		searchCountryMultiple(event) {
-			setTimeout(() => {
-				this.filteredCountriesMultiple = this.searchCountry(event.query);
-			}, 250);
-		},
-		searchBrand(event) {
-			setTimeout(() => {
-				let results;
-
-				if (event.query.length === 0) {
-					results = [...this.brands];
-				}
-				else {
-					results = this.brands.filter((brand) => {
-						return brand.toLowerCase().startsWith(event.query.toLowerCase());
-					});
-				}
-
-				this.filteredBrands = results;
-			}, 250);
-		}
-	}
+    data() {
+        return {
+            countries: null,
+            selectedCountry1: null,
+            selectedCountry2: null,
+            filteredCountries: null,
+            selectedCountries: []
+        }
+    },
+    countryService: null,
+    created() {
+        this.countryService = new CountryService();
+    },
+    mounted() {
+        this.countryService.getCountries().then(data => this.countries = data);
+    },
+    methods: {
+        searchCountry(event) {
+            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);
+        }
+    }
 }
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-.p-autocomplete-brand-item {
+.country-item {
     display: flex;
     align-items: center;
-    justify-content: space-between;
 
     img {
         width: 28px;