vue search select

A Vue.js search select component

moreta
338
107
Vue

vue-search-select

A Vue.js search select component with NO dependencies.

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