Searchable Multi-select Dropdown Plugin With jQuery - Dropdown.js

Searchable Multi-select Dropdown Plugin With jQuery - Dropdown.js
File Size: 83 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The Dropdown.js jQuery plugin converts the normal select box into a fast, performant, dynamic, multi-select dropdown list for better UX.

Key features:

  • Supports 'token' mode which can be used to create a tag/token manager;
  • Supports optgroup;
  • Supports native select operations;
  • Supports both JSON and option data sources.
  • Cross-browser and easy to use.

How to use it:

1. Import jQuery library and the jQuery Dropdown.js plugin's files into the html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="jquery.dropdown.css">
<script src="jquery.dropdown.js"></script>

2. Create a normal select box with 'display:none' CSS property.

<div class="demo">
  <select style="display:none"  name="" multiple>
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="3" selected>Selected</option>
    <option value="4" disabled>Disabled</option>
    <option value="5">5</option>
    <option value="6">6</option>
    ...
  </select>
</div>

3. Enable the plugin by calling the function on the top container as this:

$('.demo').dropdown({
  // options here
});

4. You're also allows to dynamically render the options data using JSON & JS array:

<div class="demo">
  <select style="display:none" name="" id="" multiple></select>
</div>
$('.demo').dropdown({
  data: [//data here]
});

5. Convert the select box into a tag/token manager.

$('.demo').dropdown({
  multipleMode: 'label'
});

6. All default customization options:

$('.demo').dropdown({

  // read only
  readOnly: false,

  // the maximum number of options allowed to be selected
  limitCount: Infinity,

  // search field
  input: '<input type="text" maxLength="20" placeholder="Search">',

  // dynamic data here
  data: [],

  // is search able?
  searchable: true,

  // when there's no result
  searchNoData: '<li style="color:#ddd">No Results</li>',

  // callback
  choice: function () {}

});

Change logs:

2017-10-18

  • Fixed: Cannot read property 'toLowerCase' of undefined

2017-10-13

  • v1.2

2017-09-08

  • support capital and small letter by search

2017-08-24

  • bugfixed

2017-08-05

  • v1.1.6

2017-07-24

  • bugfix

2017-07-07

  • fix some bug

2017-07-06

  • v1.1.4: bugfix

2017-06-29

  • bugfixed

2017-06-28

  • fixed for IE8

2017-06-24

  • version 1.1.0

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