Author: | anasterism |
---|---|
Views Total: | 10,905 views |
Official Page: | Go to website |
Last Update: | August 1, 2016 |
License: | MIT |
Preview:

Description:
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...' });
Purejs is the one of the best css based select plugin without need any jquery dependency.
checkout its actions and demo on http://www.jqplanet.com/2017/04/choicesjs-pure-javascript-select-plugin.html
Thanks