您的位置：首页 > Web前端 > JQuery

jQuery Searcher Plugin

2014-01-20 14:13 162 查看
摘要: jQuery Searcher Plugin

http://lloiser.github.io/jquery-searcher/

卡片样式

<!DOCTYPE html>
<html>
<head>
<title>jQuery Searcher Plugin</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css"
href="http://lloiser.github.io/jquery-searcher/css/styles.css">

<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript"
src="http://lloiser.github.io/jquery-searcher/js/jquery.searcher.js"></script>
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<section>
<div class="tab-body card active">
<h2 class="tab-header">Card View</h2>
<div class="example">
<label>Search for: <input id="cardsearchinput" type="text" /></label>
<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 class="card">
<div class="nr">#3</div>
<div class="title">Imagine</div>
<div class="artist">John Lennon</div>
<div class="date">1971</div>
</div>
<div class="card">
<div class="nr">#4</div>
<div class="title">What's Going On</div>
<div class="artist">Marvin Gaye</div>
<div class="date">1971</div>
</div>
<div class="card">
<div class="nr">#5</div>
<div class="title">Respect</div>
<div class="artist">Aretha Franklin</div>
<div class="date">1967</div>
</div>
<div class="card">
<div class="nr">#6</div>
<div class="title">Good Vibrations</div>
<div class="artist">The Beach Boys</div>
<div class="date">1966</div>
</div>
<div class="card">
<div class="nr">#7</div>
<div class="title">Johnny B. Goode</div>
<div class="artist">Chuck Berry</div>
<div class="date">1958</div>
</div>
<div class="card">
<div class="nr">#8</div>
<div class="title">Hey Jude</div>
<div class="artist">The Beatles</div>
<div class="date">1968</div>
</div>
<div class="card">
<div class="nr">#9</div>
<div class="title">Smells Like Teen Spirit</div>
<div class="artist">Nirvana</div>
<div class="date">1991</div>
</div>
<div class="card">
<div class="nr">#10</div>
<div class="title">What'd I Say</div>
<div class="artist">Ray Charles</div>
<div class="date">1959</div>
</div>
<div class="card">
<div class="nr">#11</div>
<div class="title">My Generation</div>
<div class="artist">The Who</div>
<div class="date">1965</div>
</div>
<div class="card">
<div class="nr">#12</div>
<div class="title">A Change Is Gonna Come</div>
<div class="artist">Sam Cooke</div>
<div class="date">1964</div>
</div>
<div class="card">
<div class="nr">#13</div>
<div class="title">Yesterday</div>
<div class="artist">The Beatles</div>
<div class="date">1965</div>
</div>
<div class="card">
<div class="nr">#14</div>
<div class="title">Blowin' in the Wind</div>
<div class="artist">Bob Dylan</div>
<div class="date">1963</div>
</div>
<div class="card">
<div class="nr">#15</div>
<div class="title">London Calling</div>
<div class="artist">The Clash</div>
<div class="date">1980</div>
</div>
<div class="card">
<div class="nr">#16</div>
<div class="title">I Want to Hold Your Hand</div>
<div class="artist">The Beatles</div>
<div class="date">1963</div>
</div>
<div class="card">
<div class="nr">#17</div>
<div class="title">Purple Haze</div>
<div class="artist">Jimi Hendrix</div>
<div class="date">1967</div>
</div>
<div class="card">
<div class="nr">#18</div>
<div class="title">Maybellene</div>
<div class="artist">Chuck Berry</div>
<div class="date">1955</div>
</div>
<div class="card">
<div class="nr">#19</div>
<div class="title">Hound Dog</div>
<div class="artist">Elvis Presley</div>
<div class="date">1956</div>
</div>
<div class="card">
<div class="nr">#20</div>
<div class="title">Let It Be</div>
<div class="artist">The Beatles</div>
<div class="date">1970</div>
</div>
<div class="card">
<div class="nr">#21</div>
<div class="title">Born to Run</div>
<div class="artist">Bruce Springsteen</div>
<div class="date">1975</div>
</div>
<div class="card">
<div class="nr">#22</div>
<div class="title">Be My Baby</div>
<div class="artist">The Ronettes</div>
<div class="date">1963</div>
</div>
<div class="card">
<div class="nr">#23</div>
<div class="title">In My Life</div>
<div class="artist">The Beatles</div>
<div class="date">1965</div>
</div>
<div class="card">
<div class="nr">#24</div>
<div class="title">People Get Ready</div>
<div class="artist">The Impressions</div>
<div class="date">1965</div>
</div>
<div class="card">
<div class="nr">#25</div>
<div class="title">God Only Knows</div>
<div class="artist">The Beach Boys</div>
<div class="date">1966</div>
</div>
<div class="card">
<div class="nr">#26</div>
<div class="title">A Day in the Life</div>
<div class="artist">The Beatles</div>
<div class="date">1967</div>
</div>
<div class="card">
<div class="nr">#27</div>
<div class="title">Layla</div>
<div class="artist">Derek and the Dominos</div>
<div class="date">1970</div>
</div>
<div class="card">
<div class="nr">#28</div>
<div class="title">(Sittin' on) the Dock of the Bay</div>
<div class="artist">Otis Redding</div>
<div class="date">1968</div>
</div>
<div class="card">
<div class="nr">#29</div>
<div class="title">Help!</div>
<div class="artist">The Beatles</div>
<div class="date">1965</div>
</div>
<div class="card">
<div class="nr">#30</div>
<div class="title">I Walk the Line</div>
<div class="artist">Johnny Cash</div>
<div class="date">1956</div>
</div>
<div class="card">
<div class="nr">#31</div>
<div class="title">Stairway to Heaven</div>
<div class="artist">Led Zeppelin</div>
<div class="date">1971</div>
</div>
<div class="card">
<div class="nr">#32</div>
<div class="title">Sympathy for the Devil</div>
<div class="artist">The Rolling Stones</div>
<div class="date">1968</div>
</div>
<div class="card">
<div class="nr">#33</div>
<div class="title">River Deep, Mountain High</div>
<div class="artist">Tina Turner</div>
<div class="date">1966</div>
</div>
<div class="card">
<div class="nr">#34</div>
<div class="title">You've Lost That Lovin' Feeling</div>
<div class="artist">Righteous Brothers</div>
<div class="date">1964</div>
</div>
<div class="card">
<div class="nr">#35</div>
<div class="title">Light My Fire</div>
<div class="artist">The Doors</div>
<div class="date">1967</div>
</div>
<div class="card">
<div class="nr">#36</div>
<div class="title">One</div>
<div class="artist">U2</div>
<div class="date">1991</div>
</div>
<div class="card">
<div class="nr">#37</div>
<div class="title">No Woman, No Cry</div>
<div class="artist">Bob Marley</div>
<div class="date">1975</div>
</div>
<div class="card">
<div class="nr">#38</div>
<div class="title">Gimme Shelter</div>
<div class="artist">The Rolling Stones</div>
<div class="date">1969</div>
</div>
<div class="card">
<div class="nr">#39</div>
<div class="title">That'll Be the Day</div>
<div class="artist">Buddy Holly</div>
<div class="date">1957</div>
</div>
<div class="card">
<div class="nr">#40</div>
<div class="title">Dancin' in the Sdiveets</div>
<div class="artist">Martha and the Vandellas</div>
<div class="date">1964</div>
</div>
<div class="card">
<div class="nr">#41</div>
<div class="title">The Weight</div>
<div class="artist">The Band</div>
<div class="date">1968</div>
</div>
<div class="card">
<div class="nr">#42</div>
<div class="title">Waterloo Sunset</div>
<div class="artist">The Kinks</div>
<div class="date">1968</div>
</div>
<div class="card">
<div class="nr">#43</div>
<div class="title">Tutti Frutti</div>
<div class="artist">Little Richard</div>
<div class="date">1956</div>
</div>
<div class="card">
<div class="nr">#44</div>
<div class="title">Georgia on My Mind</div>
<div class="artist">Ray Charles</div>
<div class="date">1960</div>
</div>
<div class="card">
<div class="nr">#45</div>
<div class="title">Heartbreak Hotel</div>
<div class="artist">Elvis Presley</div>
<div class="date">1956</div>
</div>
<div class="card">
<div class="nr">#46</div>
<div class="title">Heroes</div>
<div class="artist">David Bowie</div>
<div class="date">1977</div>
</div>
<div class="card">
<div class="nr">#47</div>
<div class="title">Bridge Over divoubled Water</div>
<div class="artist">Simon & Garfunkel</div>
<div class="date">1970</div>
</div>
<div class="card">
<div class="nr">#48</div>
<div class="title">All Along the Watchtower</div>
<div class="artist">Jimi Hendrix</div>
<div class="date">1968</div>
</div>
<div class="card">
<div class="nr">#49</div>
<div class="title">Hotel California</div>
<div class="artist">The Eagles</div>
<div class="date">1976</div>
</div>
<div class="card">
<div class="nr">#50</div>
<div class="title">The divacks of My Tears</div>
<div class="artist">Smokey Robinson</div>
<div class="date">1965</div>
</div>
</div>
<script>
$("#carddata").searcher({
itemSelector : ".card",
textSelector : "div",
inputSelector : "#cardsearchinput",
toggle : function(item, containsText) {
if (containsText)
$(item).fadeIn();
else
$(item).fadeOut();
}
});
</script>
</div>
</div>
</section>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
</body>
</html>


表格样式

<!DOCTYPE html>
<html>
<head>
<title>jQuery Searcher Plugin</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css"
href="http://lloiser.github.io/jquery-searcher/css/styles.css">
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript"
src="http://lloiser.github.io/jquery-searcher/js/jquery.searcher.js"></script>
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<section>
<div class="tab-body table active">
<h2 class="tab-header">Table</h2>
<div class="example">
<label>Search for: <input id="tablesearchinput" type="text"></label>
<table id="tabledata">
<thead>
<tr>
<th class="nr">#</th>
<th class="title">Title</th>
<th class="artist">Artist</th>
<th class="date">Date</th>
</tr>
</thead>
<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>
<tr>
<td>3</td>
<td>Imagine</td>
<td>John Lennon</td>
<td>1971</td>
</tr>
<tr>
<td>4</td>
<td>What's Going On</td>
<td>Marvin Gaye</td>
<td>1971</td>
</tr>
<tr>
<td>5</td>
<td>Respect</td>
<td>Aretha Franklin</td>
<td>1967</td>
</tr>
<tr>
<td>6</td>
<td>Good Vibrations</td>
<td>The Beach Boys</td>
<td>1966</td>
</tr>
<tr>
<td>7</td>
<td>Johnny B. Goode</td>
<td>Chuck Berry</td>
<td>1958</td>
</tr>
<tr>
<td>8</td>
<td>Hey Jude</td>
<td>The Beatles</td>
<td>1968</td>
</tr>
<tr>
<td>9</td>
<td>Smells Like Teen Spirit</td>
<td>Nirvana</td>
<td>1991</td>
</tr>
<tr>
<td>10</td>
<td>What'd I Say</td>
<td>Ray Charles</td>
<td>1959</td>
</tr>
<tr>
<td>11</td>
<td>My Generation</td>
<td>The Who</td>
<td>1965</td>
</tr>
<tr>
<td>12</td>
<td>A Change Is Gonna Come</td>
<td>Sam Cooke</td>
<td>1964</td>
</tr>
<tr>
<td>13</td>
<td>Yesterday</td>
<td>The Beatles</td>
<td>1965</td>
</tr>
<tr>
<td>14</td>
<td>Blowin' in the Wind</td>
<td>Bob Dylan</td>
<td>1963</td>
</tr>
<tr>
<td>15</td>
<td>London Calling</td>
<td>The Clash</td>
<td>1980</td>
</tr>
<tr>
<td>16</td>
<td>I Want to Hold Your Hand</td>
<td>The Beatles</td>
<td>1963</td>
</tr>
<tr>
<td>17</td>
<td>Purple Haze</td>
<td>Jimi Hendrix</td>
<td>1967</td>
</tr>
<tr>
<td>18</td>
<td>Maybellene</td>
<td>Chuck Berry</td>
<td>1955</td>
</tr>
<tr>
<td>19</td>
<td>Hound Dog</td>
<td>Elvis Presley</td>
<td>1956</td>
</tr>
<tr>
<td>20</td>
<td>Let It Be</td>
<td>The Beatles</td>
<td>1970</td>
</tr>
<tr>
<td>21</td>
<td>Born to Run</td>
<td>Bruce Springsteen</td>
<td>1975</td>
</tr>
<tr>
<td>22</td>
<td>Be My Baby</td>
<td>The Ronettes</td>
<td>1963</td>
</tr>
<tr>
<td>23</td>
<td>In My Life</td>
<td>The Beatles</td>
<td>1965</td>
</tr>
<tr>
<td>24</td>
<td>People Get Ready</td>
<td>The Impressions</td>
<td>1965</td>
</tr>
<tr>
<td>25</td>
<td>God Only Knows</td>
<td>The Beach Boys</td>
<td>1966</td>
</tr>
<tr>
<td>26</td>
<td>A Day in the Life</td>
<td>The Beatles</td>
<td>1967</td>
</tr>
<tr>
<td>27</td>
<td>Layla</td>
<td>Derek and the Dominos</td>
<td>1970</td>
</tr>
<tr>
<td>28</td>
<td>(Sittin' on) the Dock of the Bay</td>
<td>Otis Redding</td>
<td>1968</td>
</tr>
<tr>
<td>29</td>
<td>Help!</td>
<td>The Beatles</td>
<td>1965</td>
</tr>
<tr>
<td>30</td>
<td>I Walk the Line</td>
<td>Johnny Cash</td>
<td>1956</td>
</tr>
<tr>
<td>31</td>
<td>Stairway to Heaven</td>
<td>Led Zeppelin</td>
<td>1971</td>
</tr>
<tr>
<td>32</td>
<td>Sympathy for the Devil</td>
<td>The Rolling Stones</td>
<td>1968</td>
</tr>
<tr>
<td>33</td>
<td>River Deep, Mountain High</td>
<td>Tina Turner</td>
<td>1966</td>
</tr>
<tr>
<td>34</td>
<td>You've Lost That Lovin' Feeling</td>
<td>Righteous Brothers</td>
<td>1964</td>
</tr>
<tr>
<td>35</td>
<td>Light My Fire</td>
<td>The Doors</td>
<td>1967</td>
</tr>
<tr>
<td>36</td>
<td>One</td>
<td>U2</td>
<td>1991</td>
</tr>
<tr>
<td>37</td>
<td>No Woman, No Cry</td>
<td>Bob Marley</td>
<td>1975</td>
</tr>
<tr>
<td>38</td>
<td>Gimme Shelter</td>
<td>The Rolling Stones</td>
<td>1969</td>
</tr>
<tr>
<td>39</td>
<td>That'll Be the Day</td>
<td>Buddy Holly</td>
<td>1957</td>
</tr>
<tr>
<td>40</td>
<td>Dancin' in the Streets</td>
<td>Martha and the Vandellas</td>
<td>1964</td>
</tr>
<tr>
<td>41</td>
<td>The Weight</td>
<td>The Band</td>
<td>1968</td>
</tr>
<tr>
<td>42</td>
<td>Waterloo Sunset</td>
<td>The Kinks</td>
<td>1968</td>
</tr>
<tr>
<td>43</td>
<td>Tutti Frutti</td>
<td>Little Richard</td>
<td>1956</td>
</tr>
<tr>
<td>44</td>
<td>Georgia on My Mind</td>
<td>Ray Charles</td>
<td>1960</td>
</tr>
<tr>
<td>45</td>
<td>Heartbreak Hotel</td>
<td>Elvis Presley</td>
<td>1956</td>
</tr>
<tr>
<td>46</td>
<td>Heroes</td>
<td>David Bowie</td>
<td>1977</td>
</tr>
<tr>
<td>47</td>
<td>Bridge Over Troubled Water</td>
<td>Simon & Garfunkel</td>
<td>1970</td>
</tr>
<tr>
<td>48</td>
<td>All Along the Watchtower</td>
<td>Jimi Hendrix</td>
<td>1968</td>
</tr>
<tr>
<td>49</td>
<td>Hotel California</td>
<td>The Eagles</td>
<td>1976</td>
</tr>
<tr>
<td>50</td>
<td>The Tracks of My Tears</td>
<td>Smokey Robinson</td>
<td>1965</td>
</tr>
</tbody>
</table>
<script>
$("#tabledata").searcher({
inputSelector : "#tablesearchinput"
});
</script>
</div>
</div>
</section>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
</body>
</html>


列表样式

<!DOCTYPE html>
<html>
<head>
<title>jQuery Searcher Plugin</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css"
href="http://lloiser.github.io/jquery-searcher/css/styles.css">
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript"
src="http://lloiser.github.io/jquery-searcher/js/jquery.searcher.js"></script>
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<section>
<div class="tab-body list active">
<h2 class="tab-header">List</h2>
<div class="example">
<label>Search for: <input id="listsearchinput" type="text"></label>
<strong class="list-header">#. Title - Artist (Year)</strong>
<ol id="listdata" class="list-group">
<li>Like a Rolling Stone - Bob Dylan (1965)</li>
<li>(I Can't Get No) Satisfaction - The Rolling Stones (1965)</li>
<li>Imagine - John Lennon (1971)</li>
<li>What's Going On - Marvin Gaye (1971)</li>
<li>Respect - Aretha Franklin (1967)</li>
<li>Good Vibrations - The Beach Boys (1966)</li>
<li>Johnny B. Goode - Chuck Berry (1958)</li>
<li>Hey Jude - The Beatles (1968)</li>
<li>Smells Like Teen Spirit - Nirvana (1991)</li>
<li>What'd I Say - Ray Charles (1959)</li>
<li>My Generation - The Who (1965)</li>
<li>A Change Is Gonna Come - Sam Cooke (1964)</li>
<li>Yesterday - The Beatles (1965)</li>
<li>Blowin' in the Wind - Bob Dylan (1963)</li>
<li>London Calling - The Clash (1980)</li>
<li>I Want to Hold Your Hand - The Beatles (1963)</li>
<li>Purple Haze - Jimi Hendrix (1967)</li>
<li>Maybellene - Chuck Berry (1955)</li>
<li>Hound Dog - Elvis Presley (1956)</li>
<li>Let It Be - The Beatles (1970)</li>
<li>Born to Run - Bruce Springsteen (1975)</li>
<li>Be My Baby - The Ronettes (1963)</li>
<li>In My Life - The Beatles (1965)</li>
<li>People Get Ready - The Impressions (1965)</li>
<li>God Only Knows - The Beach Boys (1966)</li>
<li>A Day in the Life - The Beatles (1967)</li>
<li>Layla - Derek and the Dominos (1970)</li>
<li>(Sittin' on) the Dock of the Bay - Otis Redding (1968)</li>
<li>Help! - The Beatles (1965)</li>
<li>I Walk the Line - Johnny Cash (1956)</li>
<li>Stairway to Heaven - Led Zeppelin (1971)</li>
<li>Sympathy for the Devil - The Rolling Stones (1968)</li>
<li>River Deep, Mountain High - Tina Turner (1966)</li>
<li>You've Lost That Lovin' Feeling - Righteous Brothers
(1964)</li>
<li>Light My Fire - The Doors (1967)</li>
<li>One - U2 (1991)</li>
<li>No Woman, No Cry - Bob Marley (1975)</li>
<li>Gimme Shelter - The Rolling Stones (1969)</li>
<li>That'll Be the Day - Buddy Holly (1957)</li>
<li>Dancin' in the Slieets - Martha and the Vandellas (1964)</li>
<li>The Weight - The Band (1968)</li>
<li>Waterloo Sunset - The Kinks (1968)</li>
<li>Tutti Frutti - Little Richard (1956)</li>
<li>Georgia on My Mind - Ray Charles (1960)</li>
<li>Heartbreak Hotel - Elvis Presley (1956)</li>
<li>Heroes - David Bowie (1977)</li>
<li>Bridge Over Troubled Water - Simon & Garfunkel (1970)</li>
<li>All Along the Watchtower - Jimi Hendrix (1968)</li>
<li>Hotel California - The Eagles (1976)</li>
<li>The Tracks of My Tears - Smokey Robinson (1965)</li>
</ol>
<script>
$("#listdata").searcher({
itemSelector : "li",
textSelector : "",
inputSelector : "#listsearchinput"
});
</script>
</div>
</div>
</section>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jQuery Searcher
相关文章推荐
新的分享
章节导航