vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Updated autocomplete demo

pull/358/head
cagataycivici 2020-07-01 14:49:50 +03:00
parent 95e0cfe13f
commit a8e1ab6677
2 changed files with 56 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/views/autocomplete/AutoCompleteDemo.vue
View File

@ -11,27 +11,21 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Basic</h5> <h5>Basic</h5>
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" /> <AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
<span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
<h5>Dropdown and Templating</h5> <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"> <template #item="slotProps">
<div class="p-autocomplete-brand-item"> <div class="country-item">
<img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /> <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" class="p-mr-2" />
<div>{{slotProps.item}}</div> <div>{{slotProps.item.name}}</div>
</div> </div>
</template> </template>
</AutoComplete> </AutoComplete>
<span style="marginLeft: .5em">Brand: {{brand || 'none'}}</span>
<h5>Multiple</h5> <h5>Multiple</h5>
<span class="p-fluid"> <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> </span>
<ul>
<li v-for="(c,i) of selectedCountries" :key="i">{{c}}</li>
</ul>
</div> </div>
</div> </div>
@ -47,13 +41,10 @@ export default {
data() { data() {
return { return {
countries: null, countries: null,
selectedCountry: null, selectedCountry1: null,
filteredCountriesBasic: null, selectedCountry2: null,
selectedCountries: [], filteredCountries: null,
filteredCountriesMultiple: null, selectedCountries: []
brands: null,
brand: null,
filteredBrands: null
} }
}, },
countryService: null, countryService: null,
@ -62,38 +53,18 @@ export default {
}, },
mounted() { mounted() {
this.countryService.getCountries().then(data => this.countries = data); this.countryService.getCountries().then(data => this.countries = data);
this.brands = ['Audi', 'BMW', 'Fiat', 'Ford', 'Honda', 'Jaguar', 'Mercedes', 'Renault', 'Volvo'];
}, },
methods: { methods: {
searchCountry(query) { searchCountry(event) {
return this.countries.filter((country) => {
return country.name.toLowerCase().startsWith(query.toLowerCase());
});
},
searchCountryBasic(event) {
setTimeout(() => { setTimeout(() => {
this.filteredCountriesBasic = this.searchCountry(event.query); if (!event.query.trim().length) {
}, 250); this.filteredCountries = [...this.countries];
},
searchCountryMultiple(event) {
setTimeout(() => {
this.filteredCountriesMultiple = this.searchCountry(event.query);
}, 250);
},
searchBrand(event) {
setTimeout(() => {
let results;
if (event.query.length === 0) {
results = [...this.brands];
} }
else { else {
results = this.brands.filter((brand) => { this.filteredCountries = this.countries.filter((country) => {
return brand.toLowerCase().startsWith(event.query.toLowerCase()); return country.name.toLowerCase().startsWith(event.query.toLowerCase());
}); });
} }
this.filteredBrands = results;
}, 250); }, 250);
} }
}, },
@ -104,10 +75,9 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.p-autocomplete-brand-item { .country-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
img { img {
width: 28px; width: 28px;

110
src/views/autocomplete/AutoCompleteDoc.vue
View File

@ -254,28 +254,22 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt; &lt;h5&gt;Basic&lt;/h5&gt;
&lt;AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" /&gt; &lt;AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /&gt;
&lt;span style="marginLeft: .5em"&gt;Country: {{selectedCountry || 'none'}}&lt;/span&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;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;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-autocomplete-brand-item"&gt; &lt;div class="country-item"&gt;
&lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&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}}&lt;/div&gt; &lt;div&gt;{{slotProps.item.name}}&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/AutoComplete&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;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;/span&gt;
&lt;ul&gt;
&lt;li v-for="(c,i) of selectedCountries" :key="i"&gt;{{c}}&lt;/li&gt;
&lt;/ul&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
@ -283,67 +277,43 @@ export default {
import CountryService from '../../service/CountryService'; import CountryService from '../../service/CountryService';
export default { export default {
data() { data() {
return { return {
countries: null, countries: null,
selectedCountry: null, selectedCountry1: null,
filteredCountriesBasic: null, selectedCountry2: null,
selectedCountries: [], filteredCountries: null,
filteredCountriesMultiple: null, selectedCountries: []
brands: null, }
brand: null, },
filteredBrands: null countryService: null,
} created() {
}, this.countryService = new CountryService();
countryService: null, },
created() { mounted() {
this.countryService = new CountryService(); this.countryService.getCountries().then(data => this.countries = data);
}, },
mounted() { methods: {
this.countryService.getCountries().then(data => this.countries = data); searchCountry(event) {
this.brands = ['Audi', 'BMW', 'Fiat', 'Ford', 'Honda', 'Jaguar', 'Mercedes', 'Renault', 'Volvo']; setTimeout(() => {
}, if (!event.query.trim().length) {
methods: { this.filteredCountries = [...this.countries];
searchCountry(query) { }
return this.countries.filter((country) => { else {
return country.name.toLowerCase().startsWith(query.toLowerCase()); this.filteredCountries = this.countries.filter((country) => {
}); return country.name.toLowerCase().startsWith(event.query.toLowerCase());
}, });
searchCountryBasic(event) { }
setTimeout(() => { }, 250);
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);
}
}
} }
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="css"> <CodeHighlight lang="css">
.p-autocomplete-brand-item { .country-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
img { img {
width: 28px; width: 28px;