1

I have a table with two filters a search box and a selectbox. In the end I would like the search box filter to only search the table entries filtered by the selectbox.

For example: Pending Qualification is selected in the selectbox, so only rows with Pending Qualification are showing (the rest are hidden). When I search I only want to search the visible rows.

Ideally I would like to add another condition before the .each(function(e))

I tried this but it doesn't seem to work.

CSS

.hidden {
    display:none;
}

Here is containsi

$.extend($.expr[':'], {
    'containsi': function (elem, i, match, array) {
        return (elem.textContent || elem.innerText || '').toLowerCase()
        .indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});//end of case insensitive chunk

Below attempts don't work

All of these still filter all the data

$("#filterItems .hideThis").not(":containsi('" + searchSplit + "'):contains('"+ selectValue + "')").each(function (e) {
    //add a "hidden" class that will remove the item from the list
    $(this).addClass('hidden');
});

next

$("#filterItems .hideThis").not(":containsi('" + searchSplit + "')").each(function (e) {
    if($("#filterItems .hideThis:contains('" + selectValue + "')")){
       //add a "hidden" class that will remove the item from the list
       $(this).addClass('hidden');
    }
});

I also tired checking for .hidden

$("#filterItems .hideThis").not(":containsi('" + searchSplit + "')").each(function (e) {
    if(!($(this).hasClass('hidden'))){
        //add a "hidden" class that will remove the item from the list
        $(this).addClass('hidden');
    }
});

Current JSFiddle if you would like to see it

1 Answer 1

2

You are making it complicated, I'd suggest:

$('#select-Qualification').on('change', filter).change();
$("#search-text").on('keyup', filter).keyup();

function filter() 
{
    var selectValue = $('#select-Qualification').val();
    var query = $.trim($("#search-text").val()).toLowerCase();

    // filter based on the select's value
    var $col = $("#filterItems .hideThis").addClass('hidden').filter(function () {
        return $('td:eq(3)', this).text() === selectValue;
    });

    // filter based on the search input's value
    if (query.length) {
        $col = $col.filter(function() {
           return $(this).text().toLowerCase().indexOf(query) > -1;
        });
    }

    $col.removeClass('hidden');
}

http://jsfiddle.net/5LaxC/

1
  • Thank you that's pretty great I appreciate the help
    – joetinger
    May 16, 2014 at 15:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.