dropdown search box amsify select - Free Download Custom Select Dropdown With Search Box - Amsifyselect.js

Free Download Custom Select Dropdown With Search Box – Amsifyselect.js

By Posted on

This time I will share jQuery Plugin and tutorial about Custom Select Dropdown With Search Box – Amsifyselect.js, hope it will help you in programming stack.

dropdown search box amsify select - Free Download Custom Select Dropdown With Search Box - Amsifyselect.js
File Size: 27.4 KB
Views Total: 5070
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Amsifyselect.js is an improved, progressive enhancement custom select dropdown jQuery plugin for stylizing and manipulating the native HTML select element with searchable options.

Features:

  • Fully styled.
  • Supports Materialize & Bootstrap frameworks.
  • Search Box to filter through options.
  • Supports both single and multiple selection.
  • Allows you to specify the max number of options to select.
  • Optgroup is supported as well.

How to use it:

1. Load the stylesheet ‘amsify.select.css’ and JavaScript ‘amsify.select.js’ in the HTML document.

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

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

view source
01 <select name="country" multiple searchable>
02   <option value="">Select Country</option>
03   <optgroup label="Asia">
04     <option value="1">India</option>
05     <option value="2">Afghanistan</option>
06     <option value="3">Bangladesh</option>
07     <option value="4">Nepal</option>
08     <option value="5">Sri Lanka</option>
09   </optgroup>
10   <optgroup label="America">
11     <option value="6">USA</option>
12     <option value="7">Canada</option>
13     <option value="8">West Indies</option>
14     <option value="9">Chile</option>
15     <option value="10">Argentina</option>
16   </optgroup>
17   <optgroup label="Africa">
18     <option value="11">South Africa</option>
19     <option value="12">Nigeria</option>
20     <option value="13">Algeria</option>
21     <option value="14">Somalia</option>
22     <option value="15">Sudan</option>
23   </optgroup>
24 </select>

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

view source
1 $('select').amsifySelect({
2   type : 'amsify'
3 });

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

view source
1 $('select').amsifySelect({
2   type : 'bootstrap'
3 });
view source
1 $('select').amsifySelect({
2   type : 'materialize'
3 });

5. You can also enable the searchable functionality in the JavaScript.

view source
1 $('select').amsifySelect({
2   searchable : true
3 });

6. Determine the max number of options allowed to select. Default: 30.

view source
1 $('select').amsifySelect({
2   limit: 10
3 });

7. Determine the max number of labels allowed to show. Default: 5.

view source
1 $('select').amsifySelect({
2   labelLimit: 3
3 });

8. Customize the Clear & Close buttons displayed at the bottom of the dropdown list.

view source
1 $('select').amsifySelect({
2   classes: {
3     clear : '',
4     close : ''
5   }
6 });

9. Refresh the select dropdown in case new options are added.

view source
1 $('select').amsifySelect({
2   // options here
3 }, 'refresh');

10. Destroy the select dropdown.

view source
1 $('select').amsifySelect({
2   // options here
3 }, 'destroy');

This awesome jQuery plugin is developed by amsify42. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net

Related posts: