Tiny Searchable Select Component For Vue.js – ss-select

Description:

ss-select is a Vue.js component to create an easily styleable select element that supports filtering, single/multiple selection and disabled options.

How to use it:

1. Import and register the component.

import SsSelect from 'ss-select'

Vue.use(SsSelect)

2. Create a basic ss-select component in your app.

<!-- ss-select is the main component. -->
<ss-select :options="songs" track-by="name" search-by="name" class="select">
  <!-- Create a div to resolve data and methods you need from slot scope -->
  <div slot-scope="{ filteredOptions, selectedOption, isOpen, pointerIndex, $selected, $get }">
      <!-- toggle component opens and closes dropdown -->
      <ss-select-toggle class="select-toggle">
          <div class="select-toggle-placeholder">
              {{ $get(selectedOption, 'name') || 'Pick a song' }}
          </div>
          <svg class="cheveron-svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
      </ss-select-toggle>
      <!-- Create a div to display options -->
      <div v-show="isOpen" class="select-dropdown">
          <!-- search input component is used to filter options -->
          <!-- Be sure to provide search-by prop that will be the key to filter options by -->
          <ss-select-search-input class="select-search-input"></ss-select-search-input>
          <!-- Here go options -->
          <ss-select-option v-for="(song, index) in filteredOptions"
                            :value="song"
                            :index="index"
                            :key="song.name"
                            :class="[
                               pointerIndex == index ? 'pointed-option' : '',
                               $selected(song) ? 'selected-option' : ''
                            ]"
                     class="select-option">
            {{ song.name }}
          </ss-select-option>
      </div>
  </div>
</ss-select>

Download Details:

Author: miggiboy

Live Demo: https://ss-select.netlify.com/

Download Link: https://github.com/miggiboy/ss-select/archive/master.zip

Official Website: https://github.com/miggiboy/ss-select

Install & Download:

MIT

You Might Be Interested In:

Tags:

Add Comment