Adding two contains for a .each()

debugcn Published at Dev

joetinger

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

undefined

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/

Collected from the Internet

Please contact [email protected] to delete if infringement.