Quick Search for Bootstrap

Quick Search basics

You can use Quick Search purely through the markup API without writing a single line of JavaScript (just like Bootstrap does it). Add data-input="quick-search" attribute to a text input element, which initiates Quick Search via data API.

Then you must specify a target collection. Use data-search-target attribute and make sure it is pointing to a collection of elements, f.e. table rows, list items etc.

<input data-input="quick-search" data-search-target="#searchable-table tbody > tr" name="quick-search">

Searchable Table

The more data you want to show, the more you need some way of filtering. This plugin features:

<div class="form-group">
<input data-input="quick-search" data-search-target="#searchable-table tbody > tr" name="quick-search">
<span class="glyphicon glyphicon-remove-circle form-control-feedback form-action-clear" aria-hidden="true"></span>
</div>

<table id="searchable-table">
<thead>
  <tr>
    <th>Name</th>
    <th>Occupation</th>
    <th>Nationality</th>
    <th>Age</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
</tbody>
</table>

Dropdown menu

Dropdown menus are not suitable for many list items. Easiest way to improve user experience, is to add simple filtering:

<input data-input="quick-search" data-search-target="#list-of-states > li" name="quick-search">

Quick Search Overview

This table gives you a quick overview of elements and variables.