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

Update AutoComplete demo and doc

pull/1453/head
mertsincan 2021-08-16 14:21:09 +03:00
parent 6d90f461a4
commit d8ee63d286
3 changed files with 90 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/autocomplete.js
View File

@ -112,6 +112,12 @@ const AutoCompleteProps = [
type: "string",
default: "null",
description: "Style class of the overlay panel."
},
{
name: "virtualScrollerOptions",
type: "object",
default: "null",
description: "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
}
];

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

@ -33,6 +33,9 @@
</template>
</AutoComplete>
<h5>Virtual Scroll (100000 Items)</h5>
<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 31 }" field="label" dropdown />
<h5>Multiple</h5>
<span class="p-fluid">
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
@ -59,6 +62,8 @@ export default {
filteredCities: null,
filteredCountries: null,
selectedCountries: [],
selectedItem: null,
filteredItems: null,
groupedCities: [{
label: 'Germany', code: 'DE',
items: [
@ -85,7 +90,8 @@ export default {
{label: 'Tokyo', value: 'Tokyo'},
{label: 'Yokohama', value: 'Yokohama'}
]
}]
}],
items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i }))
}
},
countryService: null,
@ -120,6 +126,20 @@ export default {
}
this.filteredCities = filteredCities;
},
searchItems(event) {
//in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
let query = event.query;
let filteredItems = [];
for(let i = 0; i < this.items.length; i++) {
let item = this.items[i];
if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
filteredItems.push(item);
}
}
this.filteredItems = filteredItems;
}
},
components: {

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

@ -254,6 +254,12 @@ export default {
<td>string</td>
<td>null</td>
<td>Style class of the overlay panel.</td>
</tr>
<tr>
<td>virtualScrollerOptions</td>
<td>object</td>
<td>null</td>
<td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td>
</tr>
</tbody>
</table>
@ -428,6 +434,9 @@ export default {
</template>
</AutoComplete>
<h5>Virtual Scroll (100000 Items)</h5>
<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 31 }" field="label" dropdown />
<h5>Multiple</h5>
<span class="p-fluid">
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
@ -450,6 +459,8 @@ export default {
filteredCities: null,
filteredCountries: null,
selectedCountries: [],
selectedItem: null,
filteredItems: null,
groupedCities: [{
label: 'Germany', code: 'DE',
items: [
@ -476,7 +487,8 @@ export default {
{label: 'Tokyo', value: 'Tokyo'},
{label: 'Yokohama', value: 'Yokohama'}
]
}]
}],
items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
}
},
countryService: null,
@ -511,6 +523,20 @@ export default {
}
this.filteredCities = filteredCities;
},
searchItems(event) {
//in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
let query = event.query;
let filteredItems = [];
for(let i = 0; i < this.items.length; i++) {
let item = this.items[i];
if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
filteredItems.push(item);
}
}
this.filteredItems = filteredItems;
}
}
}
@ -545,6 +571,9 @@ export default {
</template>
</AutoComplete>
<h5>Virtual Scroll (100000 Items)</h5>
<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 31 }" field="label" dropdown />
<h5>Multiple</h5>
<span class="p-fluid">
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
@ -572,6 +601,8 @@ export default {
const filteredCities = ref();
const filteredCountries = ref();
const selectedCountries = ref([]);
const selectedItem = ref();
const filteredItems = ref();
const groupedCities = ref ([{
label: 'Germany', code: 'DE',
items: [
@ -599,6 +630,8 @@ export default {
{label: 'Yokohama', value: 'Yokohama'}
]
}]);
const items = Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }));
const searchCountry = (event) => {
setTimeout(() => {
if (!event.query.trim().length) {
@ -624,7 +657,22 @@ export default {
filteredCities.value = newFilteredCities;
}
return { countries, countryService, selectedCountry1, selectedCountry2, selectedCity, filteredCities, filteredCountries, selectedCountries, groupedCities, searchCountry, searchCity }
const searchItems = (event) => {
//in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
let query = event.query;
let _filteredItems = [];
for(let i = 0; i < this.items.length; i++) {
let item = this.items[i];
if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
_filteredItems.push(item);
}
}
filteredItems = _filteredItems;
}
return { countries, countryService, selectedCountry1, selectedCountry2, selectedCity, filteredCities, filteredCountries, selectedCountries, groupedCities, searchCountry, searchCity, searchItems, selectedItem, filteredItems, items }
}
}
<\\/script>`