forked from incite/jquery-domsearch
-
Notifications
You must be signed in to change notification settings - Fork 7
/
test.html
112 lines (112 loc) · 3.57 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery.domsearch</title>
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
</head>
<body>
<section>
<header>
<h1>domsearch.js</h1>
<p>
A <a href="http://jquery.com">jQuery</a> plugin for searching the DOM
<a class="download" href="https://github.com/juliocesar/jquery-domsearch/raw/master/jquery.domsearch.js"><span class="arrow">↓</span> Download</a>
</p>
</header>
<h1>In a gist</h1>
<p>
It lets you search within an element (e.g.: a table or a list), narrowing down
the inner elements using <a href="https://github.com/rmm5t/liquidmetal/">LiquidMetal</a>,
which is way better than whatever else you could come up with.
</p>
<h1>API</h1>
<p>
Using a text field <code>#search</code> to search in a list <code>#fruits</code>:
</p>
<code>$('input#search').domsearch('ul#fruits');</code>
<p>
In the table below, using only the weight field (assuming <code><td class="weight"></code>):
</p>
<code>$('#search').domsearch('table#fruits', {criteria: 'td.weight'});</code>
<p>
Same as the previous example, using 2 fields as criteria:
</p>
<code>$('#search').domsearch('table#fruits', {criteria: ['td.price', 'td.weight']});</code>
<h1>Demo</h1>
<p>
Try it with typos, incomplete names, and generally confusing but similar words
to what you're actually searching for.
</p>
<form action="#">
<label for="search">Search</label>
<input type="text" name="search" value="" id="search" />
</form>
<table id="fruits">
<thead>
<tr>
<th class="name">Name</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td class="weight">0.1kg</td>
</tr>
<tr>
<td>Orange</td>
<td class="weight">0.2kg</td>
</tr>
<tr>
<td>Watermelon</td>
<td class="weight">2kg</td>
</tr>
<tr>
<td>Peach</td>
<td class="weight">0.1kg</td>
</tr>
<tr>
<td>Pear</td>
<td class="weight">0.2kg</td>
</tr>
<tr>
<td>Passionfruit</td>
<td class="weight">0.05kg</td>
</tr>
<tr>
<td>Apricot</td>
<td class="weight">0.02kg</td>
</tr>
<tr>
<td>Lime</td>
<td class="weight">0.01kg</td>
</tr>
<tr>
<td>Imbu</td>
<td class="weight">0.02kg</td>
</tr>
<tr>
<td>Indonesian Guavas</td>
<td class="weight">0.3kg</td>
</tr>
</tbody>
</table>
<h1>Credits</h1>
<p>
domsearch.js is made with <span class="heart">♥</span> by
<a href="http://twitter.com/julio_ody">@julio_ody</a>. The initial work
was done while I was working at <a href="http://incite.com.au">Incite</a>, so props
to them.
</p>
</section>
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="liquidmetal.js"></script>
<script type="text/javascript" src="jquery.domsearch.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#search').domsearch('#fruits tbody')
})
</script>
</body>
</html>