jQuery Searcher Plugin

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

View the Project on GitHub at http://github.com/lloiser/jquery-searcher

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

#1
Like a Rolling Stone
Bob Dylan
1965
#2
(I Can't Get No) Satisfaction
The Rolling Stones
1965
#3
Imagine
John Lennon
1971
#4
What's Going On
Marvin Gaye
1971
#5
Respect
Aretha Franklin
1967
#6
Good Vibrations
The Beach Boys
1966
#7
Johnny B. Goode
Chuck Berry
1958
#8
Hey Jude
The Beatles
1968
#9
Smells Like Teen Spirit
Nirvana
1991
#10
What'd I Say
Ray Charles
1959
#11
My Generation
The Who
1965
#12
A Change Is Gonna Come
Sam Cooke
1964
#13
Yesterday
The Beatles
1965
#14
Blowin' in the Wind
Bob Dylan
1963
#15
London Calling
The Clash
1980
#16
I Want to Hold Your Hand
The Beatles
1963
#17
Purple Haze
Jimi Hendrix
1967
#18
Maybellene
Chuck Berry
1955
#19
Hound Dog
Elvis Presley
1956
#20
Let It Be
The Beatles
1970
#21
Born to Run
Bruce Springsteen
1975
#22
Be My Baby
The Ronettes
1963
#23
In My Life
The Beatles
1965
#24
People Get Ready
The Impressions
1965
#25
God Only Knows
The Beach Boys
1966
#26
A Day in the Life
The Beatles
1967
#27
Layla
Derek and the Dominos
1970
#28
(Sittin' on) the Dock of the Bay
Otis Redding
1968
#29
Help!
The Beatles
1965
#30
I Walk the Line
Johnny Cash
1956
#31
Stairway to Heaven
Led Zeppelin
1971
#32
Sympathy for the Devil
The Rolling Stones
1968
#33
River Deep, Mountain High
Tina Turner
1966
#34
You've Lost That Lovin' Feeling
Righteous Brothers
1964
#35
Light My Fire
The Doors
1967
#36
One
U2
1991
#37
No Woman, No Cry
Bob Marley
1975
#38
Gimme Shelter
The Rolling Stones
1969
#39
That'll Be the Day
Buddy Holly
1957
#40
Dancin' in the Streets
Martha and the Vandellas
1964
#41
The Weight
The Band
1968
#42
Waterloo Sunset
The Kinks
1968
#43
Tutti Frutti
Little Richard
1956
#44
Georgia on My Mind
Ray Charles
1960
#45
Heartbreak Hotel
Elvis Presley
1956
#46
Heroes
David Bowie
1977
#47
Bridge Over troubled Water
Simon & Garfunkel
1970
#48
All Along the Watchtower
Jimi Hendrix
1968
#49
Hotel California
The Eagles
1976
#50
The tracks of My Tears
Smokey Robinson
1965
<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();
    }
});

Table

# Title Artist Date
1Like a Rolling StoneBob Dylan1965
2(I Can't Get No) Satisfaction The Rolling Stones1965
3ImagineJohn Lennon1971
4What's Going OnMarvin Gaye1971
5RespectAretha Franklin1967
6Good VibrationsThe Beach Boys1966
7Johnny B. GoodeChuck Berry1958
8Hey JudeThe Beatles1968
9Smells Like Teen SpiritNirvana1991
10What'd I SayRay Charles1959
11My GenerationThe Who1965
12A Change Is Gonna ComeSam Cooke1964
13YesterdayThe Beatles1965
14Blowin' in the WindBob Dylan1963
15London CallingThe Clash1980
16I Want to Hold Your HandThe Beatles1963
17Purple HazeJimi Hendrix1967
18MaybelleneChuck Berry1955
19Hound DogElvis Presley1956
20Let It BeThe Beatles1970
21Born to RunBruce Springsteen1975
22Be My BabyThe Ronettes1963
23In My LifeThe Beatles1965
24People Get ReadyThe Impressions1965
25God Only KnowsThe Beach Boys1966
26A Day in the LifeThe Beatles1967
27LaylaDerek and the Dominos1970
28(Sittin' on) the Dock of the BayOtis Redding1968
29Help!The Beatles1965
30I Walk the LineJohnny Cash1956
31Stairway to HeavenLed Zeppelin1971
32Sympathy for the DevilThe Rolling Stones1968
33River Deep, Mountain HighTina Turner1966
34You've Lost That Lovin' FeelingRighteous Brothers1964
35Light My FireThe Doors1967
36OneU21991
37No Woman, No CryBob Marley1975
38Gimme ShelterThe Rolling Stones1969
39That'll Be the DayBuddy Holly1957
40Dancin' in the StreetsMartha and the Vandellas1964
41The WeightThe Band1968
42Waterloo SunsetThe Kinks1968
43Tutti FruttiLittle Richard1956
44Georgia on My MindRay Charles1960
45Heartbreak HotelElvis Presley1956
46HeroesDavid Bowie1977
47Bridge Over Troubled WaterSimon & Garfunkel1970
48All Along the WatchtowerJimi Hendrix1968
49Hotel CaliforniaThe Eagles1976
50The Tracks of My TearsSmokey Robinson1965
<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
});

List

#. Title - Artist (Year)
  1. Like a Rolling Stone - Bob Dylan (1965)
  2. (I Can't Get No) Satisfaction - The Rolling Stones (1965)
  3. Imagine - John Lennon (1971)
  4. What's Going On - Marvin Gaye (1971)
  5. Respect - Aretha Franklin (1967)
  6. Good Vibrations - The Beach Boys (1966)
  7. Johnny B. Goode - Chuck Berry (1958)
  8. Hey Jude - The Beatles (1968)
  9. Smells Like Teen Spirit - Nirvana (1991)
  10. What'd I Say - Ray Charles (1959)
  11. My Generation - The Who (1965)
  12. A Change Is Gonna Come - Sam Cooke (1964)
  13. Yesterday - The Beatles (1965)
  14. Blowin' in the Wind - Bob Dylan (1963)
  15. London Calling - The Clash (1980)
  16. I Want to Hold Your Hand - The Beatles (1963)
  17. Purple Haze - Jimi Hendrix (1967)
  18. Maybellene - Chuck Berry (1955)
  19. Hound Dog - Elvis Presley (1956)
  20. Let It Be - The Beatles (1970)
  21. Born to Run - Bruce Springsteen (1975)
  22. Be My Baby - The Ronettes (1963)
  23. In My Life - The Beatles (1965)
  24. People Get Ready - The Impressions (1965)
  25. God Only Knows - The Beach Boys (1966)
  26. A Day in the Life - The Beatles (1967)
  27. Layla - Derek and the Dominos (1970)
  28. (Sittin' on) the Dock of the Bay - Otis Redding (1968)
  29. Help! - The Beatles (1965)
  30. I Walk the Line - Johnny Cash (1956)
  31. Stairway to Heaven - Led Zeppelin (1971)
  32. Sympathy for the Devil - The Rolling Stones (1968)
  33. River Deep, Mountain High - Tina Turner (1966)
  34. You've Lost That Lovin' Feeling - Righteous Brothers (1964)
  35. Light My Fire - The Doors (1967)
  36. One - U2 (1991)
  37. No Woman, No Cry - Bob Marley (1975)
  38. Gimme Shelter - The Rolling Stones (1969)
  39. That'll Be the Day - Buddy Holly (1957)
  40. Dancin' in the Slieets - Martha and the Vandellas (1964)
  41. The Weight - The Band (1968)
  42. Waterloo Sunset - The Kinks (1968)
  43. Tutti Frutti - Little Richard (1956)
  44. Georgia on My Mind - Ray Charles (1960)
  45. Heartbreak Hotel - Elvis Presley (1956)
  46. Heroes - David Bowie (1977)
  47. Bridge Over Troubled Water - Simon & Garfunkel (1970)
  48. All Along the Watchtower - Jimi Hendrix (1968)
  49. Hotel California - The Eagles (1976)
  50. The Tracks of My Tears - Smokey Robinson (1965)
<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.

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

License

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