Intuitive Asterism Custom Select Element In Pure Javascript

Asterism Custom Select is an intuitive custom select element written in pure JavaScript. This plugin automatically adds a filter search entry to the selection box at the number of options.

select box with search option in html, filter drop down list using javascript, select box with search option in javascript, filter drop down list using jquery

Simple Date and Time Selector Using Pure JavaScript | dtsel

How to make use of it:

1. Include 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>

2. You have a native checkbox 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>

3. Create a new Select object and select the target element.

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

4. To configure the custom selection for Asterism, simply pass the following options to the selected 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...'


  • filtered (mixed) – Should the ‘filter options’ input be displayed? Default'auto'
  • filter_threshold (int) – When a select contains x options or more, display the filter input. Default8
  • filter_placeholder (string) – Placeholder text for the filter input. Default'Filter options...'

Filterable Select Box, Asterism Custom Select Plugin/Github

See Demo And Download

Official Website(anasterism): Click Here

This superior jQuery/javascript plugin is developed by anasterism. For extra Advanced Usages, please go to the official website.

Related Posts


A Simple Infinite Image Carousel Using Pure Javascript

simple infinite carousel, an extremely small, easy-to-use, and infinitely repetitive circular image slider created with regular JavaScript and CSS. Must Read: Flip Sliding Carousel Gallery Made Of…


A Vue3 Block Organization Tree View Component Library

Block tree is a simple organizational hierarchical horizontal or vertical tree view based on Vue3.x. It supports events, slots, horizontal visibility, and node processing. Thanks to hukaibaihu…


Front-End Image Preview For Mobile-Web Applications | imagePreview

Mobile JS photo preview plug-in supports rotation and zoom (two fingers / double click), and comfort and smoothness is the biggest pursuit. ImagePreview is an iOS-style, mobile-first,…


Simple And Powerful Fullscreen Lightbox Plugin | fslightbox

Fullscreen Lightbox Basic is a modern and handy plug-in for displaying photos and videos in a clean overlay box. Showcase a single source or create a great…


Create Data Flows with Drag And Drop Flowchart Builder | Drawflow

Flow diagram allows you to create data streams easily and quickly. Install a JavaScript library only and have four lines of code. Draw flow is a JavaScript…


[mdb-ui-kit] Latest Bootstrap 5 & Material Design 2.0 UI KIT

Bootstrap Material Design UI KIT – Build responsive mobile projects on the web using the world’s most popular material design front-end component library. This is a pure…