Vanilla-select NPM

vanilla-select

A vanilla, lightweight (~2.5kb gzipped), configurable select box component.

Advantages

Lightweight
No Dependencies
Elegant API - inspiration taken from React.Component
Fast search

Installation

With NPM:

npm install vanilla-select --save-dev

With Bower:

bower install vanilla-select --save-dev

Or include directly:

<!-- Include CSS -->
<link rel="stylesheet" href="dist/vanilla-select.min.css">
<!-- Include JavaScript -->
<script src="/dist/vanilla-select.min.js"></script>

Setup

  const source = [{
        icon: 'fa-font',
        value: 'Amatic SC'
    }];
  		
  const select = new Select({
            placeholder: 'Select Font',
            dataset: source,
            search: true,
            noResults: 'No results found',
            onSelected: item => callback(item)
        }).componentMount({
            el: document.querySelector('[ref="select"]')
        });

Configuration

Option	Definition
placeholder	Type: String Default: '' Placeholder text
dataset	Type: Array Default: [] Equivelant to the element within a select
search	Type: Boolean Default: false Whether a user should be allowed to search
noResults	Type: String Default: '' The text that is shown when search has returned no results
selected	Type: Object Default: null Default selected option
onSelected	Arguments: item Callback, invoked each time the item is selected, regardless if it changes the value