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

Question

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

0

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

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

Здесь мой код для того, что у меня есть, теперь только в состоянии ввести одно слово.

       //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();
       });
   });

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

user2615372 25 апр. 2014, в 22:39

Источник

Теги:

jquery

filtering

delimiter

2 ответа

Ещё вопросы

user2615372 · Answer 1 · 2014-04-28T13-17-00.000Z

Отредактированный выше ответ немного, чтобы заставить его "И" здесь решить:

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

});

Terry · Answer 2 · 2014-04-25T17-47-00.000Z

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

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

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

//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 match to array

rex = new RegExp('\\b'+searchtext.join('\\b|\\b')+'\\b','i');

Это здорово!!! Он работает в вашем примере с jfiddle, но когда я помещаю его на свой сайт, он вообще ничего не делает? Играя с этим сейчас, чтобы попытаться выяснить, почему, какие-нибудь идеи?
Что говорит консоль браузера? Вы гарантировали, что код выполняется на DOM готов? Также обратите внимание, что есть посторонний }); в вашем коде - возможно, захотите взглянуть на это.