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); } |