Easy jQuery Input Filter For Bootstrap Dropdown List

Bootstrap Dropdown Filter is a small and simple jQuery plugin which adds an input based live filter capability to your Bootstrap dropdown list.

Features:

• Auto-focus on input when dropdown is opened.
• Add scrollbar to large lists.
• Todo: Navigation with the keyboard Up and Down
• Todo: Display Not Found message to user
• Todo: Translate for other languages

How to use it:

1. Include the Bootstrap Dropdown Filter plugin into your Bootstrap project.

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

2. You might also need to include the Diacritics.js library for cleaning or stripping a string of accents and replacing them with an equivalent.

<script src="diacritics.js"></script>

3. Create a Bootstrap dropdown component and add the required 'data-filter' attribute to the dropdown list.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" data-filter >

4. That's it. The plugin will automatically generate a input filter inside the Bootstrap dropdown list.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" data-filter >

5. Customize the filter input label.

$.fn.bsDropDownFilter.defaults = {
  label: 'Filter by:'
};

Change log:

2016-04-17

• Added possibility to define the input label

---

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