autocomplete.vue
4.45 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<script setup>
import * as demoCode from '@/views/demos/forms/form-elements/autocomplete/demoCodeAutocomplete'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p>
The <code> v-autocomplete </code> component offers simple and flexible type-ahead functionality. This is useful when searching large sets of data or even dynamically fetching information from an API.
</p>
<DemoAutocompleteBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Density -->
<AppCardCode
title="Density"
:code="demoCode.density"
>
<p>
You can use <code> density </code> prop to adjusts vertical spacing within the component. Available options are: <code>default</code>, <code>comfortable</code>, and <code>compact</code>.
</p>
<DemoAutocompleteDensity />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="12"
>
<!-- 👉 Variant -->
<AppCardCode
title="Variant"
:code="demoCode.variant"
>
<p>Use <code>solo</code>, <code>outlined</code>, <code>underlined</code>, <code>filled</code> and <code>plain</code> options of <code>variant</code> prop to change the look of Autocomplete. </p>
<DemoAutocompleteVariant />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Multiple Select -->
<AppCardCode
title="Multiple"
:code="demoCode.multiple"
>
<p>Use <code>multiple</code> prop to select multiple. Accepts array for value</p>
<DemoAutocompleteMultiple />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Clearable input -->
<AppCardCode
title="Clearable"
:code="demoCode.clearable"
>
<p>Use <code>clearable</code> prop to add input clear functionality.</p>
<DemoAutocompleteClearable />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Chips -->
<AppCardCode
title="Chips"
:code="demoCode.chips"
>
<p>Use <code> chips </code> prop to use chips in select.</p>
<DemoAutocompleteChips />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Custom Filter -->
<AppCardCode
title="Custom-Filter"
:code="demoCode.customFilter"
>
<p>The <code> custom-filter </code> prop can be used to filter each individual item with custom logic.In example we will filter state based on their name and abbreviations </p>
<DemoAutocompleteCustomFilter />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 With slots -->
<AppCardCode
title="Slots"
:code="demoCode.slots"
>
<p>With the power of slots, you can customize the visual output of the select. In this example we add a profile picture for both the chips and list items using their props. </p>
<DemoAutocompleteSlots />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Asynchronous Items -->
<AppCardCode
title="Async items"
:code="demoCode.asyncItems"
>
<p>Sometimes you need to load data externally based upon a search query. </p>
<DemoAutocompleteAsyncItems />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 State Selector -->
<AppCardCode
title="State Selector"
:code="demoCode.stateSelector"
>
<p>Using a combination of v-autocomplete slots and transitions, you can create a stylish toggle able autocomplete field such as below state selector.</p>
<DemoAutocompleteStateSelector />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Validation -->
<AppCardCode
title="validation"
:code="demoCode.validation"
>
<p>Use <code>rules</code> prop to validate autocomplete. Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message.</p>
<DemoAutocompleteValidation />
</AppCardCode>
</VCol>
</VRow>
</template>