A Vue.js search select component

Overview

vue-search-select

A Vue.js search select component with NO dependencies.

Version 2.x

  • Support Vue.js 2.x
  • Five Select Component
    • 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
    • BasicSelect
      • value set through @select event
    • ListSelect
      • value set through @select event
      • Can pass custom list and customize display text to Component
      • Wrap BasicSelect component

Version 2.9.1

From v2.9.1 library css extracted standalone file.

There are three file.

  • VueSearchSelect.common.js
    • common js bundle for consuming via bundlers(webpack)
  • VueSearchSelect.umd.js
    • umd bundle for browser
  • VueSearchSelect.css
    • extracted css

From v2.9.1 vue-search-select no more need semantic-ui-css. (Demo page wrote without semantic-ui) But Need css import somewhere in your app.(for example main.js)

import 'vue-search-select/dist/VueSearchSelect.css'

And still semantic-ui-css compatible html and css classes used.

If you already use semantic-ui(or formantic-ui) VueSearchSelect.css import is unnecessary. If you want use vue-search-select without semantic-ui-css, import VueSearchSelect.css.

ModelSelect

  • ModelSelect component's v-model value can be string, number, boolean and object.
  • If you v-model type is string, onInput set by string. (Not option object)
  • This very useful when you want create form. (You don't need additional processing for form value)

Release Notes

https://github.com/moreta/vue-search-select/releases

Demo

https://vue-search-select.netlify.com

Usage

Install

npm

npm install --save vue-search-select

yarn

yarn add vue-search-select

Install alpha version

npm install --save [email protected]
# or
npm install --save [email protected]

Setup

Add this on main.js or somewhere your plugin file. (from v2.9.1)

import 'vue-search-select/dist/VueSearchSelect.css'

If you already use semantic-ui-css, css import not necessary.

Sample code

See All Samples : src/components/sample

ModelSelect Component Example

more ModelSelect sample code see this

<template>
        <!-- object value -->
        <model-select :options="options"
                                v-model="item"
                                placeholder="select item">
         </model-select>

         <!-- string value -->
         <model-select :options="options2"
                                 v-model="item2"
                                 placeholder="select item2">
         </model-select>
</template>

<script>
  import { ModelSelect } from 'vue-search-select'

  export default {
    data () {
      return {
        options: [
          { value: '1', text: 'aa' + ' - ' + '1' },
          { value: '2', text: 'ab' + ' - ' + '2' },
          { value: '3', text: 'bc' + ' - ' + '3' },
          { value: '4', text: 'cd' + ' - ' + '4' },
          { value: '5', text: 'de' + ' - ' + '5' }
        ],
        item: {
          value: '',
          text: ''
        },
        options2: [
          { value: '1', text: 'aa' + ' - ' + '1' },
          { value: '2', text: 'ab' + ' - ' + '2' },
          { value: '3', text: 'bc' + ' - ' + '3' },
          { value: '4', text: 'cd' + ' - ' + '4' },
          { value: '5', text: 'de' + ' - ' + '5' }
        ],
        item2: ''
      }
    },
    methods: {
      reset () {
        this.item = {}
      },
      selectFromParentComponent1 () {
        // select option from parent component
        this.item = this.options[0]
      },
      reset2 () {
        this.item2 = ''
      },
      selectFromParentComponent2 () {
        // select option from parent component
        this.item2 = this.options2[0].value
      }
    },
    components: {
      ModelSelect
    }
  }
</script>

ModelListSelect Component Example

more ModelListSelect sample code see this

<template>
  <model-list-select :list="options1"
                     v-model="objectItem"
                     option-value="code"
                     option-text="name"
                     placeholder="select item">
  </model-list-select>
  <model-list-select :list="options2"
                     v-model="stringItem"
                     option-value="code"
                     :custom-text="codeAndNameAndDesc"
                     placeholder="select item">
  </model-list-select>
</template>

<script>
  import { ModelListSelect } from 'vue-search-select'

  export default {
    data () {
      return {
        options1: [
          { code: '01', name: 'aa', desc: 'desc01' },
          { code: '02', name: 'ab', desc: 'desc02' },
          { code: '03', name: 'bc', desc: 'desc03' },
          { code: '04', name: 'cd', desc: 'desc04' },
          { code: '05', name: 'de', desc: 'desc05' },
          { code: '06', name: 'ef', desc: 'desc06' }
        ],
        objectItem: {},
        options2: [
          { code: '01', name: 'aa', desc: 'desc01' },
          { code: '02', name: 'ab', desc: 'desc02' },
          { code: '03', name: 'bc', desc: 'desc03' },
          { code: '04', name: 'cd', desc: 'desc04' },
          { code: '05', name: 'de', desc: 'desc05' },
          { code: '06', name: 'ef', desc: 'desc06' }
        ],
        stringItem: ''
      }
    },
    methods: {
      codeAndNameAndDesc (item) {
        return `${item.code} - ${item.name} - ${item.desc}`
      },
      reset1 () {
        this.objectItem = {}
      },
      selectFromParentComponent1 () {
        // select option from parent component
        this.objectItem = this.options[0]
      },
      reset2 () {
        this.stringItem = ''
      },
      selectFromParentComponent2 () {
        // select option from parent component
        this.stringItem = this.options[0].code
      }
    },
    components: {
      ModelListSelect
    }
  }
</script>

MultiSelect Component Example

<template>
        <multi-select :options="options"
                       :selected-options="items"
                       placeholder="select item"
                       @select="onSelect">
        </multi-select>
</template>

<script>
  import _ from 'lodash'
  import { MultiSelect } from 'vue-search-select'

  export default {
    data () {
      return {
        options: [
          { value: '1', text: 'aa' + ' - ' + '1' },
          { value: '2', text: 'ab' + ' - ' + '2' },
          { value: '3', text: 'bc' + ' - ' + '3' },
          { value: '4', text: 'cd' + ' - ' + '4' },
          { value: '5', text: 'de' + ' - ' + '5' }
        ],
        searchText: '', // If value is falsy, reset searchText & searchItem
        items: [],
        lastSelectItem: {}
      }
    },
    methods: {
      onSelect (items, lastSelectItem) {
        this.items = items
        this.lastSelectItem = lastSelectItem
      },
      // deselect option
      reset () {
        this.items = [] // reset
      },
      // select option from parent component
      selectFromParentComponent () {
        this.items = _.unionWith(this.items, [this.options[0]], _.isEqual)
      }
    },
    components: {
      MultiSelect
    }
  }
</script>

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
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
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')
name String input form name attribute
id String id attribute
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')
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
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

npm install
npm run serve
Comments
  • After click on select the input box is empty

    After click on select the input box is empty

    Hi,

    This package is giving me what I want. I am using model-list-select. Here is my code, <model-list-select :list="productItems" option-value="id" :custom-text="optionDisplayText" v-model="purchase['products'].product_id" placeholder="select item" @searchchange="searchProduct"></model-list-select>

    when I search I am getting the result on the drop-down. but when click on an item then the input box is empty and there is no data is set on v-model property.

    This is my methods,

    searchProduct (searchText) {
                    this.searchText = searchText;
                    if(this.searchText != '') {
                        this.$axios.get('products/search/' + this.searchText, this.$auth.getHeader()).then(response => {
                            this.productItems = response.data.products.data;
                        }).catch(error => {
                            console.log(error.response);
                        });
                    }
                },
                optionDisplayText (product) {
                    return `${product.name} - ${product.model}`
                }
    

    Can you please help?

    bug 
    opened by kapilpaul 8
  • Required setup for the component

    Required setup for the component

    What is the required setup for the component to behave like the one in the demo?

    By "required setup" I mean, what dependencies does the component require? Do I have to use Semantic UI, or any other libraries? I've tried using the component in a project, and it is not behaving the way it does in the demo. Specifically, when I choose an option the menu disappears and also there's no delete icon. I've replicated the demo here. I'm guessing this probably has to do with Semantic UI or something like that.

    Thanks!

    opened by barbunzel 5
  • Multi-select option-value not working?

    Multi-select option-value not working?

    I'm trying this code:

            <multi-select :options="options"
                          option-value="label"
                          option-text="group"
                          :selected-options="items"
                          placeholder="select item"
                          @select="onSelect">
    
    

    My data is:

            options: [
              { label: '1', group: 'aa' },
              { label: '2', group: 'ab' }
            ],
    
    
    opened by Tropicalista 4
  • ID for search input

    ID for search input

    Hey,

    great work with this component, we enjoy using it.

    We are currently optimizing for Google Lighthouse and noticed that we can't set an ID for the search input and thus can't link a label. Do you mind adding a prop?

    Thanks dermansi

    enhancement 
    opened by dermansi 3
  • Error with Nuxt:

    Error with Nuxt: "Cannot read property 'middleware' of undefined"

    When putting this in a Nuxt-based project, I get "Cannot read property 'middleware' of undefined", which usually means that the component is doing something on the server side that it can't do.

    Does anyone know of a workaround for this?

    To recreate, create a project like this:

    npx create-nuxt-app my-project
    

    And add the component exactly as the example shows. When loading the page, the above message appears.

    opened by paulrosen 3
  • Consider using modular lodash

    Consider using modular lodash

    I'm trying to reduce my overall bundle size and noticed this lib uses the full lodash library, consider reducing the dependency size by using the modular parts of lodash you need rather than the entire library if possible :)

    ss

    enhancement 
    opened by alexcroox 3
  • Error for last update vue-search-select

    Error for last update vue-search-select

    I found error display after I update to the last version.

    before my select-search input displayed like this: image but after I update to the last version to be like this image

    Any explanation? Thank you before

    duplicate 
    opened by kusumalubis 2
  • CSS not applied with version 2.9.1

    CSS not applied with version 2.9.1

    I was running version 2.8.3 and it was working fine but after upgrading to version 2.9.1 the dropdown's CSS has gone, it displays only an input field and in the suggestion list, there is no CSS at all, suggestion list is also a plain text. I am attaching the screenshot for reference. Screenshot 2019-08-29 at 4 16 44 PM

    opened by js-pace 2
  • The filter text doesn't disappear on the search input when type on mobile

    The filter text doesn't disappear on the search input when type on mobile

    I tried to use plugin on mobile. When I open a site in android's chrome browser a take this issue.

    Fix: replace v-model="searchText" with :value="searchText" @input="searchText = $event.target.value"

    In BasicSelect.vue on <input class="search" autocomplete="off" tabindex="0" :value="searchText" @input="searchText = $event.target.value" ref="input" @focus.prevent="openOptions" @keyup.esc="closeOptions" @blur="blurInput" @keydown.up="prevItem" @keydown.down="nextItem" @keydown.enter.prevent @keyup.enter.prevent="enterItem" @keydown.delete="deleteTextOrItem" > element

    bug enhancement 
    opened by dmpotapenko 2
  • Added option to hide selected items

    Added option to hide selected items

    Hi,

    thank you for developing this useful component!

    I have added a prop to disable the display of the selected items in the MultiSelect component. Also added a demo component to the samples where the selected items can be removed "outside" the input field as this was a use case for a project of mine.

    Cheers, beeches

    opened by beeches 2
  • Multi select delete icon  not showig

    Multi select delete icon not showig

    Everything works great

    But delete > icon:before is not rendered in DOM

    inspect element doesnt shows :before and its css

    I have tried to apply :before css to it but no luck

    **Other icons are shown properly like -

    opened by chanduzalte 2
  • Vue search select not working infinite scroll

    Vue search select not working infinite scroll

    Dear Dev.

    I use package it's ok. But I want load more infinite scroll item. I handle limit 10 item, I scroll load more next item 11-> 20 it show event load more at me. Can you support for me, Thanks

    opened by dvnha 0
  • facing issue while importing basic-select

    facing issue while importing basic-select

    Could not find a declaration file for module 'vue-search-select/dist/VueSearchSelect.cjs'. 'd:/portal/frontend/portal/node_modules/vue-search-select/dist/VueSearchSelect.cjs' implicitly has an 'any' type. Try npm i --save-dev @types/vue-search-select if it exists or add a new declaration (.d.ts) file containing declare module 'vue-search-select/dist/VueSearchSelect.cjs';

    opened by het-t 0
  • Getting error undefiend _c

    Getting error undefiend _c

    Getting error:

    TypeError: Cannot read properties of undefined (reading '_c')
        at Proxy.ModelSelectvue_type_template_id_828ed82c_render (ModelSelect.vue?3da4:1:66)
        at renderComponentRoot (runtime-core.esm-bundler.js:890:44)
        at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5602:57)
        at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
        at instance.update (runtime-core.esm-bundler.js:5716:56)
        at setupRenderEffect (runtime-core.esm-bundler.js:5730:9)
        at mountComponent (runtime-core.esm-bundler.js:5512:9)
        at processComponent (runtime-core.esm-bundler.js:5470:17)
        at patch (runtime-core.esm-bundler.js:5060:21)
        at mountChildren (runtime-core.esm-bundler.js:5256:13)
    
    
    <script setup>
    import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
    import Checkbox from '@/Components/Checkbox.vue';
    import InputError from '@/Components/InputError.vue';
    import InputLabel from '@/Components/InputLabel.vue';
    import PrimaryButton from '@/Components/PrimaryButton.vue';
    import TextInput from '@/Components/TextInput.vue';
    import Datepicker from '@vuepic/vue-datepicker';
    import '@vuepic/vue-datepicker/dist/main.css';
    import {TheMask} from 'vue-the-mask';
    import axios from 'axios';
    import 'vue-search-select/dist/VueSearchSelect.css';
    import { ModelSelect } from 'vue-search-select';
    
    </script>
    
    <template>
                  <model-select :options="drivers"
                                    v-model="form.driver"
                                    placeholder="select driver">
             </model-select>
    </template>
    
    opened by muazzamazaz 1
  • Typescript Support?

    Typescript Support?

    I noticed there are no type definitions either in this project or from DefinitelyTyped, essentially making this project useless to people trying to use it in Vue + TypeScript projects.

    It also hasn't seen updates since September of 2021, so I also wondered if someone has made a more recent fork with possible TypeScript support, as I have not the time (or desire) to write type definitions of my own.

    opened by LizAinslie 0
  • input group prepend

    input group prepend

    Hello, i`am use VueJS. How can I use it with Bootstrap's input-group-prepend class. I need to add a button next to the model-select.

    <b-input-group>
                        <model-select
                            id="pest_monitoring-pest"
                            :options="pests"
                            v-model="pestObj"
                            placeholder="Selecione"
                          />
                        <b-input-group-append>
                          
                          <b-button style="font-size:20px" variant="secundary" size="sm" id="show-btn" @click="showModalPest">
                            <i class="fa fa-question-circle"></i>
                          </b-button>
                        </b-input-group-append>
                      </b-input-group>
    
    opened by robertowiestifsul 0
Releases(v2.9.3)
  • v2.9.3(Oct 11, 2019)

  • v2.9.2(Oct 10, 2019)

  • v2.9.1(Aug 29, 2019)

    Core library component code not changed. Just change build and css only(and document)

    Features

    From v2.9.1 library css extracted standalone file.

    There are three file.

    • VueSearchSelect.common.js
      • common js bundle for consuming via bundlers(webpack)
    • VueSearchSelect.umd.js
      • umd bundle for browser
    • VueSearchSelect.css
      • extracted css

    From v2.9.1 vue-search-select no more need semantic-ui-css. (Demo page wrote without semantic-ui) But still semantic-ui-css compatible html and css class use.

    If you already use semantic-ui(or formantic-ui) VueSearchSelect.css is unnecessary. If you want use vue-search-select without semantic-ui. Just use VueSearchSelect.[common|umd].js with VueSearchSelect.css

    without semantic-ui

    Need css import somewhere in your app.(for example main.js)

    import 'vue-search-select/dist/VueSearchSelect.css'
    
    Source code(tar.gz)
    Source code(zip)
  • v2.8.3(Feb 17, 2019)

  • v2.8.2(Jan 23, 2019)

  • v2.8.0(Jan 21, 2019)

  • v2.7.1(Nov 29, 2018)

  • v2.7.0(Oct 16, 2018)

  • v2.6.3(Oct 14, 2018)

  • v2.6.2(Aug 27, 2018)

  • v2.6.1(Apr 13, 2018)

  • v2.6.0(Apr 11, 2018)

  • v2.5.0(Jan 12, 2018)

  • v2.4.0(Oct 28, 2017)

    • emit searchText(text on input field) with @searchchange event #37
      • this useful for ajax search (see ModelAjax.vue sample)
    • ModelListSelect reset bug fix #46
    • select option open when cursor focused #42
    Source code(tar.gz)
    Source code(zip)
  • v2.3.12(Sep 8, 2017)

  • v2.3.8(May 30, 2017)

    New

    • ModelSelect, ModelListSelect added (for #22)
      • use v-model component
    • custom filter #34 (via @sett4 for #29, #24)

    Improvements

    • improve MultiSelect #30
    Source code(tar.gz)
    Source code(zip)
  • v2.3.6(Feb 24, 2017)

    Now we can use placeholder prop

    For issue #21

    <basic-select :options="options"
                          :selected-option="item"
                          placeholder="select item" <<< hear!!
                          @select="onSelect">
    </basic-select>
    
    Source code(tar.gz)
    Source code(zip)
  • v2.3.5(Feb 16, 2017)

  • v2.3.4(Feb 3, 2017)

    Updated 2.3.4

    • MultiSelect's search is case insensitive (BasicSelect also)
    • MultiSelect and MultiListSelect emit last selected item.(pr#19)

    Thanks PR#19

    Source code(tar.gz)
    Source code(zip)
  • v2.3.3(Dec 31, 2016)

    There are compile error

    If you got like this error

    Uncaught ReferenceError: _h is not defined
    

    Please use this version. peerDependencies updated.

    Source code(tar.gz)
    Source code(zip)
  • v2.3.2(Dec 8, 2016)

  • v1.0.4(Aug 12, 2016)

Owner
JungJoo Seo
Coffee Lover.
JungJoo Seo
stf vue select - most flexible and customized select

stf vue select VUE2 stf vue select - most flexible and customized select For detailed explanation on how things work, checkout the DEMO install # inst

Stfalcon LLC 62 Dec 22, 2021
Select & Multi Select implementations for Vue, focused especially on implementing accessibility best practices

This entire repo is very much in an alpha state, and should currently be used only within internal Politico projects, as props / events / classes remain fluid. However, we are working towards a 1.0.0 release, and want to capture our relevant bugs fixed during that process.

POLITICO 12 Jan 1, 2023
Stylable searchable select component for VueJS. This component is renderless so you are free to customize it how you need to!

Please note that this package is still under active development. We encourage everyone to try it and give feedback. ss-select Searchable stylable sele

Miras Mustimov 27 Dec 27, 2022
Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

?? _Fireselect_ Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Ch

Firework 51 Jul 23, 2020
Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML select element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jeff Sagal 4.5k Jan 2, 2023
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Dec 30, 2022
A multi-select component with nested options support for Vue.js

vue-treeselect A multi-select component with nested options support for Vue.js Features Single & multiple select with nested options support Fuzzy mat

Fangzhou Li 2.6k Jan 1, 2023
Custom select component using Vue.JS

advanced-select What's this Component to render a "select" with advanced interactions (search, select/deselect all, etc) for websites built with Vue a

ENA 15 Nov 24, 2022
A component for Vue.js to select double-sided data.

Vue Select Sides A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values

Júlio Rosseti 72 Dec 17, 2022
Vue 3 multiselect component with single select, multiselect and tagging options.

Vue 3 Multiselect Sponsors Other libraries @vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting. @vueform/toggl

Vueform 556 Dec 27, 2022
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Dec 30, 2022
A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html tag which isn't supported in most of the browsers)

Searchable-Select-Dropdown A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html t

Rahul Gaba 13 Sep 15, 2022
Super awesome select dropdown vue.js component.

v-super-select An accessible and customizable select/drop down component that features searching, grouping, and virtual scrolling. Try out the demo sa

Will 7 Mar 31, 2022
This component gives you a multi/single select with the power of Vuejs components.

This component gives you a multi/single select with the power of Vuejs components. Demo and doc site vue-multi-select https://github.com/IneoO/vue-mul

Valère 96 Dec 27, 2022
Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect Simple multi-select component with items displayed in a table like UI Table of Contents ?? Installation ?? Introduction ?? Basic U

Milos Protic 38 Nov 24, 2022
Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.

Selecto.js Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch. Demo / API / Main Project ⚙️ Instal

Daybrush (Younkue Choi) 1.2k Jan 9, 2023
A VueJS plugin that provides a searchable and reactive select list component with no dependencies.

vue-dynamic-select A VueJS plugin that provides a searchable and reactive select list component with no dependencies. View Online Demos Here Installat

Silas Montgomery 17 Sep 18, 2022
A vue version of bootstrap select

@alfsnd/vue-bootstrap-select A vue version of bootstrap select Demo Install npm install @alfsnd/vue-bootstrap-select --save Usage import VSelect from

Luis Sandoval 46 Nov 24, 2022
An vue select components,vselect是基于vue编写的select组件

vselect An vue select components Demo Live Demo Installation: npm install --save-dev vselect-component How to use 1、To include this project you need t

web_harry 5 Jan 17, 2021