Панель поиска JQuery Live с разделителем

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

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

Вот мой код для того, что у меня сейчас есть возможность ввести только одно слово.

       //Filter Grid logic
       $("tbody").attr('class', 'searchable');
       $('input.filter').on('keyup', function () {
           var rex = new RegExp($(this).val(), 'i');

           $('.searchable tr').hide();
           $('.searchable tr').filter(function () {
               return rex.test($(this).text());
           }).show();

           //Always show the Header row
           $('tr.GridViewHeader').show();
       });
   });

Спасибо за любую помощь!


jquery filtering delimiter searchbar livesearch
person user2615372    schedule 25.04.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вот стратегия, которая может показаться запутанной, но она сработала для меня в последний раз, когда я проверял: http://jsfiddle.net/teddyrised/mWK2F/

  1. Проанализируйте значение из <input>, удалив все конечные/начальные пробелы ^\s*|\s*$, а затем разбив его по ,, делая уступки, что, возможно, могут присутствовать пробелы до/после запятой (поэтому используется \s*,\s*
  2. Создайте объект RegExp, объединив массив с помощью |, который является оператором ИЛИ в регулярном выражении.

Вот ваш модифицированный скрипт

//Filter Grid logic
$("tbody").attr('class', 'searchable');
$('input.filter').on('keyup', function () {
    // Construct array of search text
    var searchtext = $(this).val().replace(/^\s*|\s*$/g,'').split(/\s*,\s*/),
        // Construct new RegExp object
        rex = new RegExp(searchtext.join('|'),'i');

    $('.searchable tr').hide();
    $('.searchable tr').filter(function () {
        return rex.test($(this).text());
    }).show();

    //Always show the Header row
    $('tr.GridViewHeader').show();
});

Однако, если вы хотите сопоставить полные слова, вам нужно будет использовать границы слов, \b. Не забудьте экранировать обратную косую черту, поэтому вместо нее мы используем \\b. Код был вдохновлен, увидев аналогичный ответ здесь: сопоставление javascript с массивом

rex = new RegExp('\\b'+searchtext.join('\\b|\\b')+'\\b','i');
person Terry    schedule 25.04.2014
comment
Это круто!!! Это работает в вашем примере с jfiddle, но когда я помещаю его на свой сайт, он вообще ничего не делает? Играю с ним сейчас, чтобы попытаться понять, почему, есть идеи? - person user2615372; 26.04.2014
comment
Что говорит консоль браузера? Убедились ли вы, что код выполняется в DOM? Также обратите внимание, что в вашем коде есть постороннее }); - возможно, вы захотите взглянуть на него. - person Terry; 26.04.2014

arrow_upward
0
arrow_downward

Немного отредактировал приведенный выше ответ, чтобы заставить его делать «И», вот решение:

   $(document).ready(function () {
       //Filter Grid logic
       $("tbody").attr('class', 'searchable');
       $('input.filter').on('keyup', function () {
           // Construct array of search text
           var searchtext = $(this).val().split(' ');
           // Construct new RegExp object
           var rex = new RegExp('(?=.*' + searchtext.join(')(?=.*') + ').*', 'ig');

           $('.searchable tr').hide();
           $('.searchable tr').filter(function () {
               return $(this).text().replace(/(\r\n|\n|\r)/gm, " ").match(rex)
           }).show();

           //Always show the Header row
           $('tr.GridViewHeader').show();
       });

});

person user2615372    schedule 28.04.2014