Фильтрация строк таблицы с использованием JQuery

Я нашел JQuery script, который выполняет фильтрацию файлов таблицы на основе поля ввода. Этот script в основном принимает фильтр, разбивает каждое слово и фильтрует строки строк с каждым словом. Поэтому в конце вы получите список строк, в которых есть все слова в поле ввода.

http://www.marceble.com/2010/02/simple-jquery-table-row-filter/

var data = this.value.split(" ");

$.each(data, function(i, v){
     jo = jo.filter("*:contains('"+v+"')");
});

Теперь мне нужно, чтобы вместо фильтрации строк, содержащих каждое из слов в поле ввода. Я хочу отфильтровать все строки, содержащие хотя бы одно слово в поле ввода.

Один из способов, с помощью которого я попытался, - взять каждый отфильтрованный список в массив...

  var rows = new Array();

 $.each(data, function(i, v){
     rows[i] = jo.filter("*:contains('"+v+"')");
 });

На этом этапе я должен сделать UNION всех строк в массиве "rows" и показать их. Я потерялся от того, как это сделать.

Выше script в действии - http://marceble.com/2010/jqueryfilter/index.html?TB_iframe=true&width=720&height=540

Если я нахожу "cat six" в фильтре, я хочу показать три строки.

Ответ 1

Посмотрите на jsfiddle.

Идея состоит в том, чтобы фильтровать строки с помощью функции, которая будет циклически перемещаться по словам.

jo.filter(function (i, v) {
    var $t = $(this);
    for (var d = 0; d < data.length; ++d) {
        if ($t.is(":contains('" + data[d] + "')")) {
            return true;
        }
    }
    return false;
})
//show the rows that match.
.show();

EDIT: Обратите внимание, что нечувствительная к регистру фильтра не может быть достигнута с помощью селектора :contains(), но, к счастью, там text(), поэтому строка фильтра должна быть в верхнем регистре, а условие изменено на if ($t.text().toUpperCase().indexOf(data[d]) > -1). Посмотрите на это jsfiddle.

Ответ 2

Нет необходимости строить массив. Вы можете напрямую обратиться к DOM.

Попробуйте:

rows.hide();
$.each(data, function(i, v){
    rows.filter(":contains('" + v + "')").show();
});

DEMO

ИЗМЕНИТЬ

Чтобы узнать квалификационные строки, не отображая их сразу, затем передайте их функции:

$("#searchInput").keyup(function() {
    var rows = $("#fbody").find("tr").hide();
    var data = this.value.split(" ");
    var _rows = $();//an empty jQuery collection
    $.each(data, function(i, v) {
        _rows.add(rows.filter(":contains('" + v + "')");
    });
    myFunction(_rows);
});

ОБНОВЛЕНО ДЕМО

Ответ 3

Я выбрал @nrodic ответ (спасибо, кстати), но у него есть несколько недостатков:

1) Если у вас есть строки, содержащие "cat", "dog", "mouse", "cat dog", "cat dog mouse" (каждая в отдельной строке), тогда, когда вы явно просматриваете "собаку для кошки", вы будете отображены строки "cat", "dog", "mouse", "cat dog", "cat dog mouse".

2).toLowerCase() не был реализован, то есть при вводе строчной строки строки с совпадающим текстом верхнего регистра не будут отображаться.

Итак, я придумал вилку @nrodic code, где

var data = this.value; //plain text, not an array

jo.filter(function (i, v) {
    var $t = $(this);
    var stringsFromRowNodes = $t.children("td:nth-child(n)")
    .text().toLowerCase();
    var searchText = data.toLowerCase();
    if (stringsFromRowNodes.contains(searchText)) {
        return true;
        }
    return false;
})
//show the rows that match.
.show();

Здесь приведен полный код: http://jsfiddle.net/jumasheff/081qyf3s/

Ответ 4

на основе ответа @CanalDoMestre. Я добавил поддержку пустого фильтра, зафиксировал опечатку и не смог скрывать строки, поэтому я все еще могу видеть заголовки столбцов.

    $("#filterby").on('keyup', function() {
        if (this.value.length < 1) {
            $("#list tr").css("display", "");
        } else {
            $("#list tbody tr:not(:contains('"+this.value+"'))").css("display", "none");
            $("#list tbody tr:contains('"+this.value+"')").css("display", "");
        }
    });

Ответ 5

i имеет очень простую функцию:

function busca(busca){
    $("#listagem tr:not(contains('"+busca+"'))").css("display", "none");
    $("#listagem tr:contains('"+busca+"')").css("display", "");
}

Ответ 6

tr: not (: содержит (.... работа для меня

function busca(busca){
    $("#listagem tr:not(:contains('"+busca+"'))").css("display", "none");
    $("#listagem tr:contains('"+busca+"')").css("display", "");
}

Ответ 7

nrodic имеет удивительный ответ, и я просто хотел дать небольшое обновление, чтобы вы знали, что с помощью небольшой дополнительной функции вы можете расширить содержание метада в случае insenstive:

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

Ответ 8

Я использовал решение Beetroot-Betroot, но вместо использования содержит, я использовал containsNC, что делает его нечувствительным к регистру.

$.extend($.expr[":"], {
"containsNC": function(elem, i, match, array) {
return (elem.textContent || elem.innerText ||
"").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});