jQuery 搜索和过滤表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/832598/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery search and filter table
提问by AlteredConcept
I was looking for a jQuery plugin that'll filter a table according to input values.
我正在寻找一个 jQuery 插件，它会根据输入值过滤表格。
I came across http://rikrikrik.com/jquery/quicksearch/, but I can't figure out how to make it work for an already existing input box.
我遇到了http://rikrikrik.com/jquery/quicksearch/，但我不知道如何使它适用于已经存在的输入框。
Currently it creates a new input form for me (which I don't want) but I'd like to be able to use it with an existing input box that has a input submit button.
目前它为我创建了一个新的输入表单（我不想要），但我希望能够将它与具有输入提交按钮的现有输入框一起使用。
回答by Craig Walker
It looks like time has answered your question for you. QuickSearchdoes in fact allow you to attach the search function to a preexisting text input box.
看起来时间已经为你解答了你的问题。QuickSearch实际上允许您将搜索功能附加到预先存在的文本输入框。
riklomas mentions that:
riklomas 提到：
Note that the usage has changed in the latest version of quicksearch, the code is not backwards compatible, the form and input are not build by the script any more.
请注意，在最新版本的 quicksearch 中用法发生了变化，代码不向后兼容，表单和输入不再由脚本构建。
I've just started using it today and it looks like it works pretty well. It does appear to eat up it's share of CPU, at least on my testing environment (Firefox 3.6, OS X, and a pretty large data set), but that's probably not unique to this particular plugin.
我今天刚开始使用它，看起来效果很好。它似乎确实占用了它的 CPU 份额，至少在我的测试环境（Firefox 3.6、OS X 和相当大的数据集）上，但这可能不是这个特定插件独有的。
回答by ichiban
This is not possible with this plug-in out-of-the-box, unless you dig into its code and modify it to do this.
这个插件开箱即用是不可能的，除非你深入研究它的代码并修改它来做到这一点。
The search inputbox is automatically generated by its own javascript and there are no options to change that behavior.
搜索输入框是由它自己的 javascript 自动生成的，并且没有改变该行为的选项。
回答by Makram Saleh
@Adam, try firing the onKeyUp of the plugin-generated text field.
First, you need to know the id of that field (use firebug), let's say it's generated_fld, then the code will be:
@Adam，尝试触发插件生成的文本字段的 onKeyUp。首先，您需要知道该字段的 id（使用 firebug），假设它是generated_fld，那么代码将是：
$(document).ready(function() {
$("#my_other_input").keyup(function(){
$("#generated_fld").val($(this).val()).keyup();
})
});
回答by Carlos Toledo
I have been using this code for a while. First:
我一直在使用这段代码。第一的：
- The input text field to filter/search has id 'search'
- Actually it just use the first cell of each row, you can easily extend this (follow the comments on the code)
- 要过滤/搜索的输入文本字段的 ID 为“搜索”
- 实际上它只是使用每一行的第一个单元格，您可以轻松扩展它（按照代码注释）
The Code:
编码：
$('#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");
}
});
});
