jQuery Searchable Select Menu Plugin For Bootstrap - Dropselect

Dropselect is a jQuery plugin that converts the normal Bootstrap dropdown component into a searchable, multi-select dropdown menu.

Basic usage:

1. First you need to include both jQuery library and Twitter's Bootstrap framework in the html document.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-3.1.0.slim.min.js"></script>
<script src="bootstrap.min.js"></script>

2. Then download and include the Bootstrap dropselect plugin's files in the document.

<link href="css/bootstrap-dropselect.css" rel="stylesheet">
<script src="js/bootstrap-dropselect.js"></script>

3. Create a normal Bootstrap dropdowm as this:

<div class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <span id="dropselect-label">Click Me!</span>
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" id="dropselect" role="menu">
    <li class="dropdown-header">Select Menu</li>
    <li><a href="#">Select Menu #1</a></li>
    <li>
      <a href="#">
        <strong>Select Menu #2</strong><br />
        <small class="text-muted">Content description here...</small>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="glyphicon glyphicon-arrow-right"></i> Select Menu #3
      </a>
    </li>
    <li data-value="selected_value" selected><a href="#">Select Menu #4</a></li>
    <li data-value="something_value"><a href="#">Select Menu #5</a></li>
    <li class="divider"></li>
    <li><a href="#">Select Menu #6</a></li>
  </ul>
</div>

4. Finally, just the call the plugin on the top container and done.

$('#dropselect').dropselect()

5. Options and callback functions available:

$('#dropselect').dropselect({
  // event hooks
  // item specific event hooks
  onselect: function(e, item) {},
  onunselect: function(e, item) {},
  ontoggle: function(e, item) {},

  // global event hooks
  onchange: function(e) {},
  onclear: function(e) {},
  onload: function(e) {},
  onhidden: function(e) {},

  // item source
  items: 'markup',

  multiselect: false,
  toggle: true,
  autohide: false,
  icons: {
    show: true,
    selected: 'glyphicon glyphicon-ok',
    clear: 'glyphicon glyphicon-remove',
    dash: 'glyphicon glyphicon-minus'
  },
  width: 300,
  clear: {
    show: true,
    text: 'Clear selected'
  },
  filter: {
    show: true,
    placeholder: 'Search',
    casesensitive: false,
    noresult: 'No results found'
  }
})

6. API methods:

var myMenu = $('#dropselect').dropselect()

// toggles the selected state of an item
myMenu.toggle(index)

// clear all selected items
myMenu.clear()   

// manually selects an item given by an index number
myMenu.select(index)

// manually unselects an item given by an index number
.myMenu.unselect(index)

// shows the loading indicator
myMenu.showLoading()    

// hides the loading indicator
myMenu.hideLoading()    

// completely hides the dropdown
myMenu.hide()     

// Returns { item: ITEM_VALUE, text: ITEM_TEXT, icon: DEFAULT_ITEM_ICON, $element: LI_ELEMENT }
myMenu.item(index) 

// destroys the plugin
myMenu.destroy()   

Change log:

2017-08-25

• v1.1.4

---

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