jQuery 搜索和过滤表答案

【问题标题】：jQuery search and filter tablejQuery 搜索和过滤表
【发布时间】：2010-10-24 08:57:38
【问题描述】：

我正在寻找一个可以根据输入值过滤表格的 jQuery 插件。

我遇到了http://rikrikrik.com/jquery/quicksearch/，但我不知道如何使它适用于已经存在的输入框。

目前它为我创建了一个新的输入表单（我不想要），但我希望能够将它与具有输入提交按钮的现有输入框一起使用。

【问题讨论】：

标签： jquery search filter

【解决方案1】：

看来时间已经为您解答了您的问题。 QuickSearch 实际上允许您将搜索功能附加到预先存在的文本输入框。

riklomas 提到：

请注意，最新版本的quicksearch用法有所改变，代码不向后兼容，表单和输入不再由脚本构建。

我今天才开始使用它，看起来效果很好。它似乎确实消耗了它的 CPU 份额，至少在我的测试环境（Firefox 3.6、OS X 和一个相当大的数据集）上，但这可能不是这个特定插件所独有的。

【讨论】：

【解决方案2】：

这是开箱即用的插件无法实现的，除非您深入研究其代码并对其进行修改以执行此操作。

搜索输入框是由它自己的 javascript 自动生成的，没有任何选项可以改变这种行为。

【讨论】：

这在@ichiban 写的时候可能是真的，但现在不是了；看我的回答。

【解决方案3】：

@Adam，尝试触发插件生成的文本字段的 onKeyUp。首先，您需要知道该字段的 id（使用 firebug），假设它是generated_fld，那么代码将是：

$(document).ready(function() {
   $("#my_other_input").keyup(function(){
       $("#generated_fld").val($(this).val()).keyup();
   })
});

【讨论】：

【解决方案4】：

我使用这段代码已经有一段时间了。第一：

要过滤/搜索的输入文本字段的 ID 为“搜索”
实际上它只是使用每行的第一个单元格，您可以轻松扩展它（按照代码上的 cmets）

代码：

$('#search').on('input', function () {
    var str = $('#search').val().toLowerCase();
    $("#containerTable tr").each(function (index, element) {
        var label = $(this).find("td").eq(0).html().toLowerCase();
        //var labelx = $(this).find("td").eq(x).html().toLowerCase();
        //...

        if (str == '' || label.indexOf(str) != -1) {
           // || labelx.indexOf(str) != -1) ...
           $(this).css("display", "table-row");
        }
        else {
           $(this).css("display", "none");
        }
    });        
});

【讨论】：