jQuery _ jQuery 过滤搜索

jQuery 过滤搜索

姓名	帮派	邮箱
鳌拜	清廷	Aobai@zhuanfou.com
东方不败	日月神教	Dongfang@zhuanfou.com
陈近南	天地会	Jinnan@zhuanfou.com
洪秀全	太平天国	Xiu@zhuanfou.com

jQuery 过滤搜索

jQuery老仙，法力无边！jQuery老仙，神功盖世！jQuery老仙可轻松过滤搜索特定的元素。但是在学习这套功法前，会先把该功法涉及的知识点拆解开来，逐一道来。

jQuery filter()方法

jQuery的filter()的方法，与其说是过滤，不如说是把符合jQuery选择器规则的所有元素全都过一遍；在针对每个目标元素的函数中，this就是指此具体的目标元素。

$(document).ready(function(){
    $("button").on("click", function() {
        $("p").filter(function() {
            alert( $(this).html() );
        });
    });
});

运行一下

jQuery toggle( 判断条件 )

jQuery中的toggle函数以前说过的，toggle()方法可切换元素的隐藏和显示状态。但是如果给toggle方法传入一个布尔型的变量，则会toggle方法的效果如下：

传入false 给 toggle方法 - 隐藏目标元素
传入true 给 toggle方法 - 隐藏目标元素

因此，可以传入一个条件判断表达式（条件判断表达式的结果就是true或false）：

// 只有当目标元素的内容等于“反清复明”时该元素才可以显示
// 相反，目标元素内容若不是“反清复明”，就会被隐藏
$(this).toggle( $(this).html() == "反清复明" );

运行一下

JavaScript indexOf() 方法

JavaScript中判断字符串是否是另外一个字符串的子串，如果是则返回存在该子串的第一处的索引位置；若不存在该子串，则返回-1；因此indexOf方法可以判断字符串之间的包含关系。

var a = "东方不败".indexOf( "独孤求败" ); // 结果为-1
var b = "反清复明".indexOf( "反清" ); // 结果为0
var c = "I am a jerk!".indexOf( "jerk" ); // 结果为7

运行一下

jQuery过滤搜索 - 原理

所谓的使用jQuery进行过滤搜索的原理就是：

filter()方法 + toggle( 判断条件 ) + indexOf()方法。

对目标选择的元素，采用filter()方法从头到尾撸一遍；然后在撸每一个具体的目标元素的时候进行toggle(判断条件)，而判断条件就是该元素内容是否包含目标搜索词，如何判断内容是否具有目标搜索词，那就是用indexOf()方法来判断，找不到搜索词，结果就是-1，找到搜索词，结果就一定大于-1；从而根据此判断条件，来决定是否显示该元素。

对表格（Tables）进行过滤搜索

$(document).ready(function(){
  $("#searchBox").on("keyup", function() {
    var value = $(this).val().toLowerCase(); // 把大写字母变成小写
    $("#jerkTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

运行一下

对列表（Lists）进行过滤搜索

$(document).ready(function(){
  $("#searchBox").on("keyup", function() {
    var value = $(this).val().toLowerCase(); // 把大写字母变成小写
    $("li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

运行一下

对所有元素进行过滤搜索

为了不至于太夸张，下例中把搜索框排除在外啦~

$(document).ready(function(){
  $("#searchBox").on("keyup", function() {
    var value = $(this).val().toLowerCase(); // 把大写字母变成小写
    $("body *").not("#searchBox").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

运行一下

jQuery 过滤搜索

推广