v-super-select

An accessible and customizable select/drop down component that features searching, grouping, and virtual scrolling.

• Try out the demo sandbox here

Props

| Name | Description | Type | Required | Default | | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -------- | ------------------------------------------ | | label | The label of the dropdown field. | String | false | - | | name | The label of the text input. | String | false | - | | value | For v-model binding to selected value. | String | false | - | | items | Data items to display in the drop down. | Array | false | - | | placeholder | Placeholder text to display when no value is selected. | String | false | 'Select an Item...' | | disabled | If true the control is disabled from user interaction | Boolean | false | false | | loading | If true the control is disabled from user interaction and a loading spiner is shown | Boolean | false | false | | autocomplete | Value for autocomplete of input tag. | String | false | 'nope' | | groupNameField | Property of the top level item that indicates the name of the group. | String | false | 'groupName' | | childrenField | Property of the top level item that contains child items of a group. | String | false | 'items' | | valueField | Property of the item that contains its value. | String | false | 'value' | | textField | Property of the item that contains its text to display. | String | false | 'text' | | iconUrlField | Property of the item that contains the icon url. | String | false | 'iconUrl' | | iconClassField | Property of the item that contains the icon class. | String | false | 'iconClass' | | showValue | Indicates if the value of each item should be shown on the right side of the item. | Boolean | false | true | | noneFoundText | Text to display when no items are found. | String | false | 'No Results Found' | | itemHeight | Height in pixels of each individual item | Number | false | 40 | | inputHeight | Css height of the textbox container | String | false | '52px' | | inputWidth | Css width of the textbox container | String | false | '185px' | | dropDownMaxHeight | Css max height of dropdown. Will default to calculated bottom of textbox to bottom of window. | String | false | - | | debounceTime | Amount of milliseconds to wait after inputs before search is performed. | Number | false | 250 | | searchFields | Additional item properties besides textField and valueField to include when searches are performed. Can be comma delimited string or array of strings. | String | String[] | false | [] | | spellcheck | Allows enabling browser spellcheck on input field. | Boolean | false | false | | mobileHeaderBackgroundColor | Background color for full-style mobile header. | String | false | '#2e3a30' | | mobileHeaderBorderBottom | Bottom border color styling for full-style mobile header. | String | false | 'linear-gradient(to right, #2e3a30, #ccc)' | | nativeMobile | If true, mobile devices will use native select. | Boolean | false | false |

Events

| Event Name | Description | Parameters | | -------------------- | --------------------------------- | ----------------------- | | input | For v-model binding | The selected item | | change | - | The selected item | | selectedIndexChanged | - | The selected item index | | opened | Fired when the dropdown is opened | - | | closed | Fired when the dropdown is closed | - | | keyup | Keyup event from filter input | - | | keypress | Keypress event from filter input | - | | keydown | Keydown event from filter input | - |

Slots

| Name | Description | Scope Variables | | ---------- | ---------------------------------------------------------------------------------------------- | --------------- | | label | Use to format label | label | | item | Use to format your list items however you like. Use item.$html to show bolded search values. | item | | group | Use to format your group header list items however you like. | group | | none-found | Use to format your 'none found' item however you like. | text | | default | Add items the old way with option tags, ex: <option value="1">Item 1</option> | - |

Methods

| Method | Description | Parameters | | -------------- | ------------------------------- | ------------------ | | selectItem | Used to select an item. | The item to select | | clearSelection | Clears the drop down selection. | - | | hideDropdown | Used to hide the dropdown | - | | showDropdown | Used to show the dropdown | - |