Question

我正在寻找一个jQuery插件，它会根据输入值过滤表。

我遇到了http://rikrikrik.com/jquery/quicksearch/，但我无法弄清楚如何让它适用于现有的输入框。

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

Answer 1

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

riklomas提到：

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

我刚刚开始使用它，它看起来效果很好。它似乎占用了它的CPU份额，至少在我的测试环境中（Firefox 3.6，OS X和一个非常大的数据集），但这可能并不是这个特定插件所独有的。

Answer 2

这个开箱即用的插件是不可能的，除非你深入研究它的代码并修改它来执行此操作。

搜索输入框由其自己的javascript自动生成，并且没有更改该行为的选项。

Answer 3

@Adam，尝试触发插件生成的文本字段的onKeyUp。首先，你需要知道该字段的id（使用firebug），让我们说它是generated_fld，然后代码将是：

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

Answer 4

我一直在使用这段代码。第一：

要过滤/搜索的输入文本字段具有ID＆＃39; search＆＃39;
实际上它只是使用每行的第一个单元格，您可以轻松扩展它（按照代码上的注释）

守则：

$('#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");
        }
    });        
});

jQuery搜索和过滤表

4 个答案: