vue-search-select

A Vue.js search select form component
448,293 407
vuejs select search autocomplete
Install
npm install vue-search-select
Latest Version:3.2.0
Older releases:1 · 2
License:MIT
Last Updated:Sep 24, 2023
Links: GitHub  ·  npm
Maintainer: moreta

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
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
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
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

Run examples

pnpm run build
pnpm run dev:docs

Related Packages

vue-search-select-css

A Vue.js search select form component that allows css customizations (based on v...

1,602 1
autocomplete search select vuejs
vue3-autocomplete

* Installation * Usage

10,928 31
autocomplete search select vuejs vue vue3
vue-advanced-search

Features: * Autocomplete search * Single select * Multiple select

8,693 11
autocomplete search vue
@trevoreyre/autocomplete

Simple autocomplete component in vanilla JS and Vue

62,090 437
autocomplete search select a11y accessibility combobox typeahead wai-aria
vue3-typeahead-input

A simple Vue 3 type-ahead input component that shows a list of suggested items b...

1,924 3
autocomplete search select vuejs input typeahdead vue vue3

Version History

Version Released License
3.2.0 MIT
3.1.2 MIT
3.1.1 MIT
3.1.0 MIT
3.0.8 MIT
Pre-releases (15)
Version Released License
2.9.2-alpha.3 MIT
2.9.2-alpha.2 MIT
2.9.2-alpha.1 MIT
2.9.1-alpha.9 MIT
2.9.1-alpha.8 MIT