Home » jQuery 外掛

[jQ]Sieve 0.3.0

範例 1
沒錯!只要 300 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

sieve-0

當表格內容太多想要搜尋時,Sieve 可以動態產生一個搜尋框來讓使用者篩選指定的內容結果。甚至是各種區塊、段落也都能透過 Sieve 來進行篩選搜尋呢!

套件名稱:Sieve
套件網址:0.3.0
作者網站:http://rmm5t.github.io/jquery-sieve/
套件網址:N/A
發佈日期:2013-04-05
檔案大小:1 KB
檔案下載:jquery.sieve.min.js

參數選項說明:

檢視原始碼 JavaScript
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
searchInput(選填)
描述: 用來搜尋用的輸入框元素;若沒指定現成的輸入框的話,則會用 searchTemplate 的語法來產生一個新的輸入框
預設值: null
 
searchTemplate(選填)
描述: 用來搜尋用的輸入框語法
預設值: "<div><label>Search: <input type='text'></label></div>"
 
itemSelector(選填)
描述: 要搜尋的子元素項目
預設值: "tbody tr"
 
textSelector(選填)
描述: 子元素項目中用來比對的內容來源
預設值: null
 
toggle(選填)
描述: 控制項目顯示及隱藏的方式
預設值: function(item, match) {
	return item.toggle(match);
}
 
complete(選填)
描述: 當搜尋完成後要執行的動作
預設值: function() {}

方法說明:

檢視原始碼 JavaScript
1
2
// 將指定區塊前加入一個用來搜尋用的輸入框
$(selector).sieve(options);

使用範例:

檢視原始碼 JavaScript
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
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.sieve.min.js"></script>
<script type="text/javascript">
	$(function(){
		// 在 table 上方加入一個搜尋功能
		$('table').sieve({
			searchTemplate: '<div><label>搜尋: <input type="text"></label></div>'
		});
	});
</script>
 
<body>
	<table>
		<thead>
			<tr>
				<th>President</th>
				<th>Birthplace</th>
			</tr>
		</thead>
		<tbody>
			<tr><td>Zachary Taylor</td><td>Barboursville, Virginia</td></tr>
			<tr><td>Warren G. Harding</td><td>Blooming Grove, Ohio</td></tr>
			<tr><td>John Quincy Adams</td><td>Braintree, Massachusetts</td></tr>
			<tr><td>John F. Kennedy</td><td>Brookline, Massachusetts</td></tr>
			<tr><td>Grover Cleveland</td><td>Caldwell, New Jersey</td></tr>
			<tr><td>William Henry Harrison</td><td>Charles City County, Virginia</td></tr>
			<tr><td>John Tyler</td><td>Charles City County, Virginia</td></tr>
			<tr><td>William Howard Taft</td><td>Cincinnati, Ohio</td></tr>
			<tr><td>James Buchanan</td><td>Cove Gap, Pennsylvania</td></tr>
			<tr><td>Rutherford B. Hayes</td><td>Delaware, Ohio</td></tr>
			<tr><td>Dwight D. Eisenhower</td><td>Denison, Texas</td></tr>
			<tr><td>Chester A. Arthur</td><td>Fairfield, Vermont</td></tr>
			<tr><td>Franklin Pierce</td><td>Hillsborough, New Hampshire</td></tr>
			<tr><td>Barack Obama</td><td>Honolulu, Hawaii</td></tr>
			<tr><td>Bill Clinton</td><td>Hope, Arkansas</td></tr>
			<tr><td>Franklin D. Roosevelt</td><td>Hyde Park, New York</td></tr>
			<tr><td>Martin Van Buren</td><td>Kinderhook, New York</td></tr>
			<tr><td>Harry S. Truman</td><td>Lamar, Missouri</td></tr>
			<tr><td>Andrew Jackson</td><td>Lancaster County, South Carolina</td></tr>
			<tr><td>George H. W. Bush</td><td>Milton, Massachusetts</td></tr>
			<tr><td>James A. Garfield</td><td>Moreland Hills, Ohio</td></tr>
			<tr><td>George W. Bush</td><td>New Haven, Connecticut</td></tr>
			<tr><td>Theodore Roosevelt</td><td>New York City, New York</td></tr>
			<tr><td>William McKinley</td><td>Niles, Ohio</td></tr>
			<tr><td>Abraham Lincoln</td><td>Nolin Creek, Kentucky</td></tr>
			<tr><td>Benjamin Harrison</td><td>North Bend, Ohio</td></tr>
			<tr><td>Gerald Ford</td><td>Omaha, Nebraska</td></tr>
			<tr><td>James K. Polk</td><td>Pineville, North Carolina</td></tr>
			<tr><td>Jimmy Carter</td><td>Plains, Georgia</td></tr>
			<tr><td>Calvin Coolidge</td><td>Plymouth, Vermont</td></tr>
			<tr><td>Ulysses S. Grant</td><td>Point Pleasant, Ohio</td></tr>
			<tr><td>James Madison</td><td>Port Conway, Virginia</td></tr>
			<tr><td>John Adams</td><td>Braintree, Massachusetts</td></tr>
			<tr><td>Andrew Johnson</td><td>Raleigh, North Carolina</td></tr>
			<tr><td>Thomas Jefferson</td><td>Shadwell, Virginia</td></tr>
			<tr><td>Lyndon B. Johnson</td><td>Stonewall, Texas</td></tr>
			<tr><td>Woodrow Wilson</td><td>Staunton, Virginia</td></tr>
			<tr><td>Millard Fillmore</td><td>Moravia, New York</td></tr>
			<tr><td>Ronald Reagan</td><td>Tampico, Illinois</td></tr>
			<tr><td>Herbert Hoover</td><td>West Branch, Iowa</td></tr>
			<tr><td>George Washington</td><td>Westmoreland County, Virginia</td></tr>
			<tr><td>James Monroe</td><td>Westmoreland County, Virginia</td></tr>
			<tr><td>Richard Nixon</td><td>Yorba Linda, California</td></tr>
		</tbody>
	</table>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

1 筆針對 [jQ]Sieve 0.3.0 的迴響

  1. 請問老師我有一個input id是txt
    不知道如何抓取他的值來變成過濾字串
    不然預設plugin的有固定位置不是很方便

    $(function () {
    // 在 table 上方加入一個搜尋功能
    $('table').sieve({
    itemSelector:('#txt').val()
    });
    });

發表迴響