html – Twitter Bootstrap行过滤器/搜索框

栏目: CSS · 发布时间: 6年前

内容简介:代码日志版权声明:翻译自:http://stackoverflow.com/questions/14713622/twitter-bootstrap-row-filter-search-box

我无法找到关于如何为Twitter Bootstrap创建简单搜索查询或行过滤器的教程.我尝试了很多,我不知道我做错了什么,或插件与Bootstrap不兼容.如果可以的话请帮忙.

我试过了:

$(document).ready(function() {
 //Declare the custom selector 'containsIgnoreCase'.
      $.expr[':'].containsIgnoreCase = function(n,i,m){
          return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
      };

      $("#search").keyup(function(){

          $("#tabela").find("tr").hide();
          var data = this.value.split(" ");
          var jo = $("#tabela").find("tr");
          $.each(data, function(i, v){

               //Use the new containsIgnoreCase function instead
               jo = jo.filter("*:containsIgnoreCase('"+v+"')");
          });

          jo.show();

      }).focus(function(){
          this.value="";
          $(this).css({"color":"black"});
          $(this).unbind('focus');
      }).css({"color":"#C0C0C0"});
});

没有这个…也许我在我的桌子或搜索框上缺少任何“id”,我是新的.

这是我使用的:

$('input.filter').live('keyup', function() {
    var rex = new RegExp($(this).val(), 'i');
    $('.searchable tr').hide();
        $('.searchable tr').filter(function() {
            return rex.test($(this).text());
        }).show();
    });

要使用它,您只需创建一个表,其中具有类“可搜索”的tbody,然后在页面上某处的类“filter”的输入(我更喜欢将它们放置在搜索图标后面的Bootstrap Popup中).

代码日志版权声明:

翻译自:http://stackoverflow.com/questions/14713622/twitter-bootstrap-row-filter-search-box


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

High Performance JavaScript

High Performance JavaScript

Nicholas C. Zakas / O'Reilly Media / 2010-4-2 / USD 34.99

If you're like most developers, you rely heavily on JavaScript to build interactive and quick-responding web applications. The problem is that all of those lines of JavaScript code can slow down your ......一起来看看 《High Performance JavaScript》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试