Awesome

vue-search-select

A Vue.js search select component with NO dependencies.

CSS borrowed from https://github.com/Semantic-Org

Version 3

Support Vue.js 3.x

export files

There are three file.

VueSearchSelect.js
VueSearchSelect.umd.js
VueSearchSelect.css

Components

ModelSelect (from v2.3.8)
- value set through v-model
- value can be string, number, boolean and object
  - If you v-model type is string, onInput set by string. (Not option object)
ModelListSelect (from v2.3.8)
- value set through v-model
- Can pass custom list and customize display text to Component
- Wrap ModelSelect component
MultiSelect
- search select for multiple select
MultiListSelect
- ListSelect for MultiSelect

Version2's BasicSelect, ListSelect components are removed.

Styles

import "vue-search-select/dist/VueSearchSelect.css"

Semantic-ui-css compatible html and css classes used.

If you already use semantic-ui(or fomantic-ui) VueSearchSelect.css import is unnecessary. If you want use vue-search-select without semantic-ui-css, import VueSearchSelect.css.

Release Notes

https://github.com/moreta/vue-search-select/releases

Demo

https://vue-search-select.netlify.com

Usage

Install

npm install --save vue-search-select
yarn add vue-search-select
pnpm add vue-search-select

Props

Component	Name	Type	Default	Description
ModelSelect	options	Array		option list
	isError	Boolean	false	error style
	isDisabled	Boolean	false	disable component
	placeholder	String	''
	filterPredicate	String	new RegExp(inputText, 'i')
	customAttr	Function	() => ''	Add custom html attribute
	name	String		input form name attribute
	id	String		id attribute
	searchchange	Event		event triggered on search change
	blur	Event		event triggered on input blur
ModelListSelect	list	Array		option list
	optionValue	String		value key
	optionText	String		text key
	customText	Function		custom text function
	optionDisabled	String	false	disabled key
	isError	Boolean	false	error style
	isDisabled	Boolean	false	disable component
	placeholder	String	''
	filterPredicate	String	new RegExp(inputText, 'i')
	name	String		input form name attribute
	id	String		id attribute
	searchchange	Event		event triggered on search change
	blur	Event		event triggered on input blur
MultiSelect	options	Array		option list
	selectedOptions	Array		default option list
	isError	Boolean	false	error style
	isDisabled	Boolean	false	disable component
	placeholder	String	''
	filterPredicate	String	new RegExp(inputText, 'i')
	customAttr	Function	() => ''	Add custom html attribute
	hideSelectedOptions	Boolean	false	Hide Option list that item selected
	name	String		input form name attribute
	id	String		id attribute
	searchchange	Event		event triggered on search change
	blur	Event		event triggered on input blur
	select	Event		event triggered when item selected
MultiListSelect	list	Array		option list
	optionValue	String		value key
	optionText	String		text key
	customText	Function		custom text function
	optionDisabled	String	false	disabled key
	selectedItems	Array		default option(raw object)
	isError	String	false	error style
	isDisabled	Boolean	false	disable component
	placeholder	String	''
	filterPredicate	String	new RegExp(inputText, 'i')
	name	String		input form name attribute
	id	String		id attribute
	searchchange	Event		event triggered on search change
	blur	Event		event triggered on input blur
	select	Event		event triggered when item selected

Run examples

pnpm run build
pnpm run dev:docs