moreta / vue-search-select

A Vue.js search select component
https://vue-search-select.netlify.com
MIT License
404 stars 126 forks source link
select vue vue-component

vue-search-select

A Vue.js search select component with NO dependencies.

Version 3

export files

There are three file.

Components

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