A Vue.js search select component with NO dependencies.
There are three file.
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