Filterable Select Box In Pure JavaScript – Asterism Custom Select

The Asterism Custom Select JavaScript library allows to create custom select boxes with item filtering support. By default, the Asterism Custom Select automatically add a filter search input to the select box when the number of options are larger than 7.

How to use it:

Include the select.min.css and select.min.js on the webpage.

<link href="dist/select.min.css" rel="stylesheet">
<script src="dist/select.min.js"></script>

Let’s say you have a native select box like this:

<select id="demo">
  <option value="1">HTML5</option>
  <option value="2">CSS3</option>
  <option value="3">JavaScript</option>
  <option value="4">jQuery</option>
  <option value="5">AngularJS</option>
  <option value="6">ReactJS</option>
  <option value="7">React Native</option>
  <option value="8">Bootstrap</option>
  <option value="9">Vue.js</option>
  <option value="10">Python</option>
</select>

Create a new Select object and specify the target element.

var mySelect = new Select('#demo');

To config the Asterism Custom Select, just pass the following options to the Select object.

var mySelect = new Select('#demo',{
    // auto show the live filter
    filtered: 'auto',
    // auto show the live filter when the options >= 8
    filter_threshold: 8,
    // custom placeholder
    filter_placeholder: 'Filter options...'
    
});