Elegant Select Element Replacement In Pure JavaScript – vanilla-select

Category: Form , Javascript | July 8, 2018
Author: vorotina
Views Total: 3,306
Official Page: Go to website
Last Update: July 8, 2018
License: MIT

Preview:

Elegant Select Element Replacement In Pure JavaScript – vanilla-select

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.13 (07/07/2018)

  • Update

You Might Be Interested In:


Leave a Reply