Таблица поиска и фильтрации jQuery

Question

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

Я сталкивался с http://rikrikrik.com/jquery/quicksearch/,, но я не могу понять, как заставить это работать для уже существующего поля ввода.

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

Answer 1

Похоже, что время ответило на ваш вопрос для вас. QuickSearch фактически позволяет вам прикрепить функцию поиска к уже существующему полю ввода текста.

Рикломас упоминает, что:

Обратите внимание, что использование изменилось в последней версии quicksearch, код не имеет обратной совместимости, форма и ввод больше не создаются сценарием.

Я только начал использовать его сегодня, и, похоже, он работает довольно хорошо. Похоже, он поглощает свою долю ресурсов процессора, по крайней мере, в моей тестовой среде (Firefox 3.6, OS X и довольно большой набор данных), но это, вероятно, не уникально для этого конкретного плагина.

Answer 2

Это невозможно с этим подключаемым модулем, если вы не копаетесь в его коде и не модифицируете его для этого.

Поле ввода поиска автоматически генерируется его собственным javascript, и нет вариантов для изменения этого поведения.

Answer 3

Я давно пользуюсь этим кодом. Во-первых:

1. Поле ввода текста для фильтрации / поиска имеет идентификатор 'search'
2. На самом деле это просто первая ячейка каждой строки, вы можете легко расширить ее (следуйте комментариям к коду)

Код:

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

Answer 4

@ Адам, попробуйте запустить onKeyUp сгенерированного плагином текстового поля. Во-первых, вам нужно знать идентификатор этого поля (используйте firebug), скажем, это generated_fld, тогда код будет:

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