X
Last updated on 2 December, 2013
Categorized under jQuery plugins

Searchtable jQuery plugin (< 1kb)

Description

This little (~0.6kb) jQuery plugin prepends a text input field above a HTML table, allowing you to search for specific data inside the table. Data is filtered immediately as text is typed into the field.

Demo

1Afghanistan
2Aland Islands
3Albania
4Alderney
5Algeria
6American Samoa

Play around with it here

Download

Via GitHub

Dependencies

jQuery (1.3+)

Installation

1. Make a table

<table id="myTable">
   <tr><td>Cat</td></tr>
   <tr><td>Calendar</td></tr>
   <tr><td>Dog</td></tr>
   <tr><td>Danger</td></tr>
</table>

2. Include the script

<script src="https://rawgithub.com/PoeHaH/jQueryPlugins/master/searchable.js/searchtable-min.js"></script>

3. Make the table searchable

$.(document).ready(function()
{
   $('#myTable').searchtable();
});

Options

$('#myTable').searchable(
{
   className:'myClass', // style the input field. Not required.
   text:'Type to search' //placeholder text of input field. Not required.
});

Other posts in this category

Lightweight jQuery fader