html如何保留搜索条件,如何在HTML表上执行实时搜索和过滤

繁星淼淼

我创建了这些例子。简单的indexOf搜索var $rows = $('#table tr');$('#search').keyup(function() {

    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {

        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();

        return !~text.indexOf(val);

    }).hide();});演示：http：//jsfiddle.net/7BUmG/2/正则表达式搜索使用正则表达式的更高级功能将允许您以行中的任何顺序搜索单词。如果您键入apple green或者它将起作用green apple：var $rows = $('#table tr');$('#search').keyup(function() {

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',

        reg = RegExp(val, 'i'),

        text;

    $rows.show().filter(function() {

        text = $(this).text().replace(/\s+/g, ' ');

        return !reg.test(text);

    }).hide();});演示：http：//jsfiddle.net/dfsq/7BUmG/1133/防抖动当您通过搜索多行和多列实现表过滤时，考虑性能和搜索速度/优化非常重要。简单地说你不应该在每次击键时运行搜索功能，这是没有必要的。为了防止过滤太频繁，你应该去除它。上面的代码示例将变为：$('#search').keyup(debounce(function() {

    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    // etc...}, 300));你可以选择任何去抖动实现，例如从Lodash _.debounce，或者你可以使用非常简单的东西，就像我在下一个演示中使用的那样(从这里去抖动)：http：//jsfiddle.net/7BUmG/6230/和http：/ /jsfiddle.net/7BUmG/6231/。

0

0