Vs Autocomplete Dropdown
Nested-Autocomplete-Multiselect-Dropdown for Vue 3, refer GitHub branch v2 for usage and installation in Vue 2
- Ability to single/multi-select
- Ability to select same option from different groups/parents
- A11y compliant
:film_projector: Demo for Vue3.
:film_projector: Demo for Vue2.
:rocket: Usage
<vs-autocomplete
label="Select option(s)"
:options="options"
:multiple="true"
:maxSelectableCount="4"
:searchInputText="searchInputText"
:searchOptionMatcher="optionMatcher"
:keepMenuOpenOnRender="false"
:compact="false"
noSearchResultsText="No results found"
labelHint="Select up to 4 options"
v-model="selectedOptions"
@open="onOpen"
@close="onClose"
/>
:paperclip: Install
npm
npm install vs-autocomplete@latest
yarn
yarn add vs-autocomplete@latest
UMD
<script src="https://cdn.jsdelivr.net/npm/vs-autocomplete@latest/dist/vs-autocomplete.umd.min.js"></script>
OR
<script src="https://unpkg.com/vs-autocomplete@latest/dist/vs-autocomplete.umd.js"></script>
In Vue 2, UMD component is auto-registered globally.
In Vue 3, you need to either register the component globally by calling
app.component('vs-autocomplete', window.VsAutocomplete);
or
use it locally by registering it in the component.
components: {
VsAutocomplete: window.VsAutocomplete,
}
:gear: Props
Name | Type | Default | Required | Description |
---|
options | Array<option > | [] | true | Options to be displayed in the dropdown |
label | String | - | false | Label of the option |
multiple | Boolean | false | false | Whether to allow multiple selection |
searchInputText | String | '' | false | Search input text to filter options |
keepMenuOpenOnRender | Boolean | false | false | Whether to keep the menu open on render |
compact | Boolean | false | false | Whether to render the dropdown in compact mode |
maxSelectableCount | Number | 0 | false | Maximum number of options that can be selected |
noSearchResultsText | String | No results found | false | Text to display when no search results are found |
labelHint | String | - | false | Hint text to display below the label |
searchOptionMatcher | (searchInputText, option) => boolean | () => {} | false | Custom search option matcher function compares searchInputText against each option. If defined, it must return a boolean indicating match; otherwise, defaults to matching option labels. |
:link: Events
Name | Type | Description | Payload |
---|
v-model | Array<option > | Emits the selected option(s) | Selected options |
open | (HTMLDivElement, HTMLUListElement) => {} | Emits when the dropdown-menu opens | Dropdown element & Menu element |
close | (HTMLDivElement, HTMLUListElement) => {} | Emits when the dropdown-menu closes | Dropdown element & Menu element |
:nut_and_bolt: Type option
Name | Type | Required | Description |
---|
label | String | true | Label of the option |
id | Any | false | Unique identifier for the option |
value | Any | false | Value of the option |
disabled | Boolean | false | Whether the option is disabled |
selected | Boolean | false | Whether the option is selected |
children | Array<option > | false | Nested options |
:nail_care: CSS Variables for Styling
Variable Name | Description |
---|
--primary-color | Primary border color on the combobox |
--background-color | Background color of the option when focused or hovered |
--hint-color | Hint text color |
--v-dropdown-width | Width of the combobox |
--max-width | Max width of the combobox |
--box-shadow | Box shadow of the combobox |
--bezier-curve | Menu toggle transition |
--animation-delay | Transition delay |
:clipboard: options
prop example
[
{
id: 1,
label: 'Option 1',
value: 'option1',
children: [
{
id: 1.1,
label: 'Option 1.1',
value: 'option1.1',
selected: true,
},
{
id: 1.2,
label: 'Option 1.2',
value: 'option1.2',
},
{
id: 1.3,
label: 'Option 1.3',
value: 'option1.3',
children: [
{
id: 1.31,
label: 'Option 1.3.1',
value: 'option1.3.1',
},
{
id: 1.32,
label: 'Option 1.3.2',
value: 'option1.3.2',
},
],
},
{
id: 1234,
label: 'Option 1.4',
value: 'option1.4',
},
],
},
{
id: 2,
label: 'A long label. Should be truncated. Check in demo.(Option 2)',
value: 'option2',
selected: true,
disabled: true,
},
{
id: 3,
label: 'A long label. Should be truncated. Check in demo.(Option 3)',
value: 'option3',
disabled: true,
children: [
{
id: 3.1,
label: 'Option 3.1',
value: 'option3.1',
},
{
id: 3.2,
label: 'Option 3.2',
value: 'option3.2',
},
{
id: 3.3,
label: 'Option 3.3',
value: 'option3.3',
children: [
{
id: 3.31,
label: 'Option 3.3.1',
value: 'option3.3.1',
},
{
id: 3.32,
label: 'Option 3.3.2',
value: 'option3.3.2',
},
],
},
{
id: 4,
label: 'Option 4.1',
value: 'option4.1',
},
],
},
];
:bug: Feedback
If you find any issues, please create an issue here.