vue-search-select
A Vue.js search select component.
- Dependency only vue 2.x & lodash
- Design css use from https://github.com/Semantic-Org
Version 2.x
- Support Vue.js 2.x
- Five Select Component
- ModelSelect (from v2.3.8)
- similar BasicSelect
- value set through v-model
- value can be string or object
- If you pass string, onInput set by string
- ModelListSelect (from v2.3.8)
- ListSelect for ModelSelect
- BasicSelect
- simple search select
- ListSelect
- Can pass to Component custom list and customize display text
- Wrap BasicSelect component
- MultiSelect
- search select for multiple select
- MultiListSelect
- ListSelect for MultiSelect
- ModelSelect (from v2.3.8)
Release Notes
https://github.com/javiercbk/vue-search-select/releases
Demo
http://javiercbk.github.io/vue-search-select/
Usage
Install
npm install --save vue-search-select
or by yarn
yarn add vue-search-select
Install alpha version
yarn add vue-search-select@alpha
# or
yarn add vue-search-select@2.3.8-alpha.1
Sample code
See All Samples : src/components/sample
ModelSelect Component Example
<!-- object value --> <!-- string value -->
BasicSelect Component Example
MultiSelect Component Example
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 | |
showMissingOptions | Boolean | false | Show missing options | |
ModelListSelect | list | Array | option list | |
optionValue | String | value key | ||
optionText | String | text key | ||
customText | Function | custom text function | ||
isError | Boolean | false | error style | |
isDisabled | Boolean | false | disable component | |
placeholder | String | '' | ||
filterPredicate | String | new RegExp(inputText, 'i') | ||
BasicSelect | options | Array | option list | |
selectedOption | Object | { value: '', text: '' } | default option | |
isError | Boolean | false | error style | |
isDisabled | Boolean | false | disable component | |
placeholder | String | '' | ||
customAttr | Function | () => '' | Add custom html attribute | |
filterPredicate | String | new RegExp(inputText, 'i') | ||
ListSelect | list | Array | option list | |
optionValue | String | value key | ||
optionText | String | text key | ||
customText | Function | custom text function | ||
selectedItem | Object | default option(raw object) | ||
isError | Boolean | false | error style | |
isDisabled | Boolean | false | disable component | |
placeholder | String | '' | ||
filterPredicate | String | new RegExp(inputText, 'i') | ||
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 | |
MultiListSelect | list | Array | option list | |
optionValue | String | value key | ||
optionText | String | text key | ||
customText | Function | custom text function | ||
selectedItems | Array | default option(raw object) | ||
isError | String | false | error style | |
isDisabled | Boolean | false | disable component | |
placeholder | String | '' | ||
filterPredicate | String | new RegExp(inputText, 'i') |
Run examples
# install dependencies yarn install # serve with hot reload at localhost:9090 yarn run dev
Acknowledgments
This library is a fork from vue-search-select.