BS 筛选

---

Bootstrap 筛选

Bootstrap 没有筛选组件。我们可以使用 jQuery 来筛选 / 搜索元素。

---

筛选表格

对表中的项目执行不区分大小写的搜索:

实例

在 input 字段中键入一些内容，就可以搜索表格中的名字、姓氏或电子邮件:

Firstname	Lastname	Email
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")。

---

筛选列表

对列表中的项目执行不区分大小写的搜索:

实例

在输入字段中键入一些内容以搜索列表中的项目:

• 第一项
• 第二项
• 第三项
• Fourth

亲自试一试 »

---

筛选下拉列表

对下拉菜单中的项目执行不区分大小写的搜索:

实例

打开下拉菜单，在输入字段中键入一些内容进行下拉项搜索:

Dropdown Example

• HTML
• CSS
• JavaScript
• jQuery
• Bootstrap
• Angular

亲自试一试 »

---

筛选所有文本

对 div 元素中的所有文本执行不区分大小写的搜索:

实例

I am a paragraph.

I am a div element inside div. I am a buttonAnother button

Another paragraph.

亲自试一试 »