v-super-select

1,408 7

Install
`npm install v-super-select`
Latest Version:	0.2.12 (Jul 10, 2019)
Vue:	2
License:	GPL-3.0-or-later
Last Updated:	Jan 7, 2023
Links:	GitHub · npm

Maintainer: wpatter6

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	-

Related Packages

vue3-select-component

A flexible & modern select-input control for Vue 3.

649,098 119

dropdown select vue3

tselect

Dropdown menu for VueJs

348 1

dropdown select menu

vue-selectize

A Vue.js directive for selectize.js

9,747 24

dropdown select vue selectize

vue-tags-component

Vue.js 2+ tags component

5,521 25

dropdown select vue tags

vue-bootstrap-multiselect

Multiselect packages for Vue.js 2 by bootstrap 4 without jQuery

5,254

select vue vue.js multiselect

Version History

Version	Released	Vue	License
0.2.12	Jul 10, 2019	^2.6.10	GPL-3.0-or-later
0.2.11	Jul 10, 2019	^2.6.10	GPL-3.0-or-later
0.2.10	Jul 5, 2019	^2.6.10	GPL-3.0-or-later
0.2.9	Jul 5, 2019	^2.6.10	GPL-3.0-or-later
0.2.8	Jun 26, 2019	^2.6.10	GPL-3.0-or-later
0.2.7	Jun 26, 2019	^2.6.10	GPL-3.0-or-later
0.2.6	Jun 26, 2019	^2.6.10	GPL-3.0-or-later
0.2.5	Jun 21, 2019	^2.6.10	GPL-3.0-or-later
0.2.4	Jun 18, 2019	^2.6.10	GPL-3.0-or-later
0.2.3	Jun 17, 2019	^2.6.10	GPL-3.0-or-later
0.2.2	Jun 17, 2019	^2.6.10	GPL-3.0-or-later
0.2.1	Jun 17, 2019	^2.6.10	GPL-3.0-or-later
0.2.0	Jun 13, 2019	^2.6.10	GPL-3.0-or-later
0.1.22	Jun 12, 2019	^2.6.10	GPL-3.0-or-later
0.1.21	Jun 12, 2019	^2.6.10	GPL-3.0-or-later
0.1.20	Jun 12, 2019	^2.6.10	GPL-3.0-or-later
0.1.19	Jun 12, 2019	^2.6.10	GPL-3.0-or-later
0.1.18	Jun 12, 2019	^2.6.10	GPL-3.0-or-later
0.1.17	Jun 12, 2019	^2.6.10	GPL-3.0-or-later
0.1.16	Jun 12, 2019	^2.6.10	GPL-3.0-or-later
0.1.15	Jun 12, 2019	^2.6.10	GPL-3.0-or-later
0.1.14	Jun 11, 2019	^2.6.10	GPL-3.0-or-later
0.1.13	Jun 11, 2019	^2.6.10	GPL-3.0-or-later
0.1.12	Jun 11, 2019	^2.6.10	GPL-3.0-or-later
0.1.11	Jun 11, 2019	^2.6.10	GPL-3.0-or-later
0.1.10	Jun 11, 2019	^2.6.10	GPL-3.0-or-later
0.1.9	Jun 11, 2019	^2.6.10	GPL-3.0-or-later
0.1.8	Jun 9, 2019	^2.6.10	GPL-3.0-or-later
0.1.7	Jun 9, 2019	^2.6.10	GPL-3.0-or-later
0.1.6	Jun 9, 2019	^2.6.10	GPL-3.0-or-later