Elegant Select Element Replacement In Pure JavaScript – vanilla-select

Category: Form , Javascript | October 31, 2020
Views Total:1,729 views
Official Page:Go to website
Last Update:October 31, 2020


Elegant Select Element Replacement In Pure JavaScript – vanilla-select


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


$ 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)
      el: document.querySelector('[ref="select"]')


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

You Might Be Interested In:

Leave a Reply