Download
Demo
- Overview
- Documents
User Rating: 0/5 ( 0 votes)
Your Rating:
The jQuery Searcher Plugin connects any list-like data with an input for searching.
1. INCLUDE JS FILES
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="js/jquery.searcher.js"></script>
2. HTML
<input id="tablesearchinput" />
<table id="tabledata">
<tbody>
<tr>
<td>#1</td>
<td>Like a Rolling Stone</td>
<td>Bob Dylan</td>
<td>1965</td>
</tr>
<tr>
<td>#2</td>
<td>(I Can't Get No) Satisfaction</td>
<td>The Rolling Stones</td>
<td>1965</td>
</tr>
...
</tbody>
</table>
3. JAVASCRIPT
$("#tabledata").searcher({
inputSelector: "#tablesearchinput"
// itemSelector (tbody > tr) and textSelector (td) already have proper default values
});
4. OPTIONS
The following table contains all possible options which can be passed to the plugin.
| Name | Type | Description |
|---|---|---|
| itemSelector | string |
jQuery selector for the data item element (e.g. tr, li). Default: "tbody > tr" |
| textSelector | string |
jQuery selector for the element which contains the text within the item element. If not specified the data item element is used instead. Default: "td" |
| inputSelector | string |
jQuery selector for the input element which is used to filter the data. Default: "" |
| caseSensitive | bool |
Determines whether the search should be case sensitive or not. Default: false |
| toggle | function |
this function is called for each data item element when the text in the input changes. it is called with the data item element and a boolean value indicating whether the item contains the text or not. Default: function(item, containsText) { $(item).toggle(containsText); } |
JS Tutorial



