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

Add typeahead demo to demonstrate replacement of InputChips

pull/5806/head
Cagatay Civici 2024-05-25 16:59:06 +03:00
parent 2f2f0451cf
commit 40201d667a
1 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
doc/autocomplete/MultipleDoc.vue
View File

@ -3,7 +3,11 @@
<p>Multiple mode is enabled using <i>multiple</i> property used to select more than one value from the autocomplete. In this case, value reference should be an array.</p> <p>Multiple mode is enabled using <i>multiple</i> property used to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
</DocSectionText> </DocSectionText>
<div class="card p-fluid"> <div class="card p-fluid">
<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" /> <label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple :suggestions="items" @complete="search" />
<label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple @complete="search" :typeahead="false" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -12,16 +16,25 @@
export default { export default {
data() { data() {
return { return {
value: '', value1: null,
value2: null,
items: [], items: [],
code: { code: {
basic: ` basic: `
<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" /> <label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple :suggestions="items" @complete="search" />
<label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple @complete="search" :typeahead="false" />
`, `,
options: ` options: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" /> <label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple :suggestions="items" @complete="search" />
<label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple @complete="search" :typeahead="false" />
</div> </div>
</template> </template>
@ -29,7 +42,8 @@ export default {
export default { export default {
data() { data() {
return { return {
value: '', value1: null,
value2: null,
items: [] items: []
}; };
}, },
@ -44,14 +58,19 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" /> <label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple :suggestions="items" @complete="search" />
<label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple @complete="search" :typeahead="false" />
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
const value = ref(""); const value1 = ref(null);
const value2 = ref(null);
const items = ref([]); const items = ref([]);
const search = (event) => { const search = (event) => {