Bootstrap Filters (Advanced)
Bootstrap 過濾器
Bootstrap 沒有提供過濾元件。但是，我們可以使用 jQuery 來過濾/搜尋元素。
過濾表格
對錶格中的項執行不區分大小寫的搜尋
示例
在輸入框中鍵入內容以搜尋表格中的名字、姓氏或電子郵件
| 名 | 姓 | 郵箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@mail.com |
| July | Dooley | july@greatstuff.com |
| Anja | Ravendale | a_r@test.com |
jQuery
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
自己動手試一試 »
示例說明：我們使用 jQuery 迴圈遍歷每個表格行，以檢查是否存在與輸入欄位值匹配的文字值。 toggle() 方法會隱藏不匹配搜尋結果的行（display:none）。我們使用 toLowerCase() 方法將文字轉換為小寫，這樣搜尋就不會區分大小寫（搜尋時允許“john”、“John”甚至“JOHN”）。
過濾列表
對列表中的項執行不區分大小寫的搜尋
過濾下拉選單
對下拉選單中的項執行不區分大小寫的搜尋
過濾任意內容
對 div 元素內的文字執行不區分大小寫的搜尋
