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


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

查看所有标签

猜你喜欢:

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

计算机图形学

计算机图形学

[美]PeterShirley / 高春晓、赵清杰、张文耀 / 人民邮电出版社 / 2007-6 / 49.00元

本书是国外高校采用率很高的计算机图形学教材,共分为26章,全面系统地讲解了计算机图形学的基本概念和相关技术。书中先介绍图形学相关的数学知识,然后依次讲解图形学的光栅算法、三三维观察、隐藏面消除、光照、纹理、绘制等算法和理论,并介绍可视感知、计算机动画、基于图像的绘制、可视化以及构建交互式图形应用等。 本书可作为信息技术等相关专业本科生、研究生计算机图形学课程的教材,也可以作为计算机图形学工作......一起来看看 《计算机图形学》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具