jQuery搜索框输入文字查找表格内容匹配代码

jQuery搜索框输入文字查找表格内容匹配代码-精品资源网
jQuery搜索框输入文字查找表格内容匹配代码
此内容为免费资源,请登录后查看
0
免费资源

jQuery搜索框输入文字查找表格内容匹配代码

非常棒的jQuery搜索框输入文字查找表格内容匹配代码,分电脑端与手机移动端两个版本,匹配关键词的内容会飘红显示,可连续匹配不同的关键词。

js代码

<script>
  // 定义首个查询下键
  var active = 0;
  $(\'.ayui-btn\').click(function(){
    search();
  })
  function search(){
    // 获取搜索框的值
    var kwds = $(\"#searchInput\").val();
    // 获取第一个列表内容
    var this_one = {};
    var real_name = \'\';
    // 定义数据列表
    var list = $(\"#all_list .list_one\");
    // 定义查找的起始值
    var true_one = 0;
    for (var i = 0; i < list.length; i++) {
      this_one = $(list[i]);

      real_name = this_one.text().toString();
      // 执行like匹配
      if(real_name.match(kwds)){
        // 处理第当前的结果
        if(true_one == active){
          // 获取窗口的宽和高
          var windows_wdh = $(window).width();
          var windows_hgt = $(window).height();
          // 获取第一个坐标
          var x_len = this_one.offset().left;
          var y_len = this_one.offset().top;
          // 驱动滚动条滚动到指定的位置
          $(\"html,body\").animate({scrollTop:(y_len-windows_hgt/2), scrollLeft:(x_len-windows_wdh/2)},500);
          // 标记当前选中的结果
          this_one.addClass(\'active\');
          this_one.removeClass(\'on\');
        }else{
          // 标记符合的结果
          this_one.addClass(\'on\');
          this_one.removeClass(\'active\');
        }
        // 累加真实的选择
        true_one++;
      }else{
        this_one.removeClass(\'on\');
      }
    }
    // 判断是否搜索完毕 如果搜索完毕 则从第一个开始 否则继续搜索下一个
    active = active >= true_one-1 ? 0 : active+1;

    return false;
  }
</script>

© 版权声明
THE END
喜欢就支持一下吧
点赞128 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容