jQuery Searcher Plugin

Lets imagine that we are showing a list of the 50 greatest songs of all time (thanks Rolling Stone Magazine). The following tabs show different ways on how to display them including an input for searching using the jQuery Searcher Plugin.

• Card View
• Table
• List

<input id="cardsearchinput" />
<div id="carddata">
    <div class="card">
        <div class="nr">#1</div>
        <div class="title">Like a Rolling Stone</div>
        <div class="artist">Bob Dylan</div>
        <div class="date">1965</div>
    </div>
    <div class="card">
        <div class="nr">#2</div>
        <div class="title">(I Can't Get No) Satisfaction </div>
        <div class="artist">The Rolling Stones</div>
    <div class="date">1965</div>
    </div>
    ...
</div>

$("#carddata").searcher({
    itemSelector: ".card",
    textSelector: "div",
    inputSelector: "#cardsearchinput",
    toggle: function(item, containsText) {
        // use a typically jQuery effect instead of simply showing/hiding the item element
        if (containsText)
            $(item).fadeIn();
        else
            $(item).fadeOut();
    }
});

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

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

<input id="listsearchinput" />
<ol id="listdata">
    <li>Like a Rolling Stone - Bob Dylan (1965)</li>
    <li>(I Can't Get No) Satisfaction  - The Rolling Stones (1965)</li>
    ...
</ol>

$("#listdata").searcher({
    itemSelector: "li",
    textSelector:  "", // the text is within the item element (li) itself
    inputSelector: "#listsearchinput"
});

Usage

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>

And call the plugin for any list with this script:

$("...").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
});

Documentation

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

License

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