jQuery Searcher Plugin

The jQuery Searcher Plugin connects any list-like data with an input for searching.

Installation

Download the latest release of this plugin on GitHub.

Include the jquery.searcher.js script after the jQuery library (unless you are packaging scripts somehow else):

<script src="/path/to/jquery.searcher.js"></script>

Usage

$("...").searcher({
    itemSelector:  "...", // jQuery selector for the data item element
    textSelector:  "...", // jQuery selector for the element which contains the text
    inputSelector: "..."  // jQuery selector for the input element
});

Example

See the live version of the following example on the GitHub page.

Given the following HTML markup:

<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>

And executing the following script connects the input with the table:

$("#tabledata").searcher({
    inputSelector: "#tablesearchinput"
    // itemSelector (tbody > tr) and textSelector (td) already have proper default values
});

Documentation

The following table contains all possible options which can be passed to the plugin.

License

Copyright (c) 2014 Lukas Beranek Licensed under the MIT license.