JQuery Plugin for Custom Select Dropdown With Search Box | Amsifyselect.js

Amsifyselect.js is an dropdown jQuery component manipulating a native HTML select element with searchable options.

bootstrap select dropdown with search box, searchable select dropdown html, select box with search option, search box with suggestions dropdown, dropdown with search box jquery


  • Supports rendering and bootstrap frameworks.
  • Search box to filter through options.
  • Supports single and multiple selections.
  • Allows you to specify the maximum number of options to choose from.
  • Optgroup is also supported.

How to make use of it:

1. Load the stylesheet “amsify.select.css” and the JavaScript “amsify.select.js” into an HTML document.

<link rel="stylesheet" href="/path/to/css/amsify.select.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/jquery.amsifyselect.js"></script>

2. To make the options searchable, add a ‘searchable’ attribute to the HTML list as follows:

<select name="country" multiple searchable>
  <option value="">Select Country</option>
  <optgroup label="Asia">
    <option value="1">India</option>
    <option value="2">Afghanistan</option>
    <option value="3">Bangladesh</option>
    <option value="4">Nepal</option>
    <option value="5">Sri Lanka</option>
  <optgroup label="America">
    <option value="6">USA</option>
    <option value="7">Canada</option>
    <option value="8">West Indies</option>
    <option value="9">Chile</option>
    <option value="10">Argentina</option>
  <optgroup label="Africa">
    <option value="11">South Africa</option>
    <option value="12">Nigeria</option>
    <option value="13">Algeria</option>
    <option value="14">Somalia</option>
    <option value="15">Sudan</option>

3. Call the plugin and apply the default theme to the custom select dropdown.

  type : 'amsify'

4. The plugin also works with the latest Bootstrap & Materialize frameworks.

  type : 'bootstrap'
  type : 'materialize'

5. You can also enable the search function in JavaScript.

  searchable : true

6. Determine the maximum number of options allowed to be selected.

  limit: 10

7. Set the maximum number of stickers allowed to display.

  labelLimit: 3

8. Customize the Clear and Close buttons displayed at the bottom of the drop-down list.

  classes: {
    clear : '',
    close : ''

9. Refresh the selection dropdown if new options are added.

  // options here
}, 'refresh');

10. Destroy the dropdown selection.

  // options here
}, 'destroy');

Custom Select Dropdown With Search Box, jquery.amsify.select Plugin/Github, select box with search option in javascript

See Demo And Download

Official Website(amsify42): Click Here

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

Related Posts


Generating Beautiful Vector Graphs With jQuery | smartGraph

SmartGraph is a free and easy-to-use JavaScript library to create beautiful vector diagrams with many customizations. This plugin allows developers to create dynamic, responsive, draggable vector graphics…


Image Slider With 20 Cool Transitions Component | vue-flux

Vue flux is an image slider developed with Vuejs 2 that comes with 20+ nice transitions out of the box. Included transitions 2D transitions Fade: Fades from…


Simple background Image Parallax Scroll Plugin In jQuery

Background parallax effect is a simple jQuery background image without any library. Uses jQuery’s scroll() function to track the scroll event and applies the exact parallax scroll…


Modular Color Picker Plugin for Bootstrap | BS Colorpicker

Bootstrap Colorpicker is a standard color picker plugin for Bootstrap 4. Colorpicker Plugin for Bootstrap 5/4/3 frameworks that allow you to add a color picker to an…


GDPR Friendly iFrame Manager In Vanilla JS | iframemanager

IframeMananger is a lightweight JavaScript plug-in that helps you to comply with GDPR by completely removing iframes at first and setting a notice related to that service….


Diagonal Thumbnails Carousel Slider | Anime.js

Diagonal Slider is a cool mini carousel made with Anime.js JavaScript library. It takes a bunch of pictures and turns them into a circular user interface where…