A Vue.js search select component with NO dependencies.
- CSS borrowed from https://github.com/Semantic-Org
- Support Vue.js 3.x
There are three file.
- VueSearchSelect.js
- VueSearchSelect.umd.js
- VueSearchSelect.css
- 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.
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.
https://github.com/moreta/vue-search-select/releases
https://vue-search-select.netlify.com
npm install --save vue-search-select
yarn add vue-search-select
pnpm add vue-search-select
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 |
pnpm run build
pnpm run dev:docs