Elegant Select Element Replacement In Pure JavaScript – vanilla-select

Preview:

Description:

vanilla-select is a pure vanilla JavaScript plugin used for rendering a dynamic, searchable dropdown list/menu to replace the native select box.

Installation:

# NPM
$ npm install vanilla-select
# Bower
$ bower install vanilla-select

How to use it:

Add references to the vanilla-select’s JavaScript and CSS files:

<link rel="stylesheet" href="src/vanilla-select.css">
<script src="src/vanilla-select.js"></script>

Define your data to be presented in the dropdown select.

const source = [
      {
        icon: 'fa fa-font',
        value: 'Abril Fatface'
      },
      {
        icon: 'fa fa-font',
        value: 'Allura'
      },
      {
        icon: 'fa fa-font',
        value: 'Amatic SC'
      }
];

Create a new instance with some options and then append the dropdown select to the target container.

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"]')
});

Changelog:

1.0.18 (10/31/2020)

• fixed data-value issue

1.0.17 (04/04/2020)

• added content prop

1.0.16 (03/28/2020)

• Update

1.0.13 (07/07/2018)

• Update