vanilla-select

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

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

Development

To setup a local environment: clone this repo, navigate into it's directory in a terminal window and run the following command:
``npm install``

Browser compatibility

vanilla-select is compiled using Closure Compiler to enable support for ES5 browsers.

Browsers

Edge 15+ Chrome 41+ FireFox 35+ Opera 28+ Safari 9+
If you need to support IE11 and IE Edge14 - use vanilla-select-ie.min.js bundle. It includes element-closest polyfill.

Gulp tasks

| Task | Usage | | ------------------- | ------------------------------------------------------------ | | gulp build | Build JS an CSS | | gulp serve | Fire up local server for development |

Roadmap

• Keyboard navigation

License

MIT License