JQuery Live Search Bar with Delimiter

Question

I have a search bar on my page that uses JQuery to filter my gridview. I can't figure out how to have it filter on multiple values; using a delimiter to determine the different values.

So if I put in the search bar: Dog, Blue It would recognize the coma as a delimiter and first filter the table and hide any rows that don't contain Dog and then also hide any rows that don't contain Blue.

Here's my code for what I have now only being able to enter one word.

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

Thanks for any help!

score 0 · Answer 1 · edited May 23 '17 at 10:32

Here is a strategy that might sound convoluted, but works for me the last time I checked: http://jsfiddle.net/teddyrised/mWK2F/

Parse the value from the <input> by remove all trailing/leading spaces ^\s*|\s*$, and then splitting it along , while making concessions that perhaps whitespace might be present before/after the comma (therefore using \s*,\s*
Construct 'RegExp' object by joining the array with |, which is the OR operator in regex.

Here is your modified script

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

However, if you want to match full words, you will need to use word boundaries, \b. Remember to escape the backslash, so we use \\b instead. Code was inspired after seeing a similar answer here: javascript match against array

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

This is great!!! It does work in your jfiddle example, but when I put it in my site, it doesn't do anything at all? Playing with it now to try and figure out why, any ideas? — user2615372, Apr 25 '14 at 20:35
What does the browser console say? Did you ensure that the code is executed on DOM ready? Also note that there is an extraneous `});` in your code - might want to take a look at it. — Terry, Apr 25 '14 at 21:24

score 0 · Answer 2 · answered Apr 28 '14 at 15:51

Edited the above answer a bit to get it to do 'AND' here's the solution:

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

});

JQuery Live Search Bar with Delimiter

2 Answers2