當表格內容太多想要搜尋時，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> |
請問老師我有一個input id是txt
不知道如何抓取他的值來變成過濾字串
不然預設plugin的有固定位置不是很方便
$(function () {
// 在 table 上方加入一個搜尋功能
$('table').sieve({
itemSelector:('#txt').val()
});
});