jQuery search and filter table

Question

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

Я столкнулся с , но не могу понять, как заставить его работать для уже существующего окна ввода.

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

riklomas упоминает, что:

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

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

Answer 4

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

1. поле ввода текста для фильтрации/поиска имеет идентификатор «поиск»
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"); 
     } 
    });   
});