v-super-select

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	-