I have a problem with combining these two filters, in the example below there are two select filters I tried to combine them by calling function filterResults (curr_text, curr_text2) with two arguments but the second filter stops working then, can someone help me?

https://jsfiddle.net/3vn76Lqu/

jQuery.expr[":"].CIcontains = jQuery.expr.createPseudo(function(arg) {
   return function(elem) {
     return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
   };
 });

CodePudding user response：

//no need to create if you are using :contains
jQuery.expr[":"].CIcontains = jQuery.expr.createPseudo(function (arg) {
    return function (elem) {
        return jQuery(elem).text().trim().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

jQuery('.filter-container').on('change', '#price-filter, #language-filter', function () {
    var price = $('#price-filter').val();
    var lang = $('#language-filter').val();
    jQuery('.course-body').show(); //show all rows
    if (price != '') {
        jQuery('.course-price .course-term:not(:CIcontains("'   price   '"))').parents('.course-body').hide(); //hide rows which do not contains matched price
    }
    if (lang != '') {
        jQuery('.course-language .course-term:not(:CIcontains("'   lang   '"))').parents('.course-body').hide(); //can also use :contains instead of :CIcontains
    }
});

ul {
    list-style: none;
    padding-left: 0;
}

li.course-body {
    background: #DEEAEB;
    padding: 30px 35px;
    display: flex;
    margin-bottom: 19px;
}

.course-title a {
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    color: #000;
}

li.course-body {
    background: #BEBEBE;
    padding: 30px 35px;
    display: grid;
    margin-bottom: 19px;
    grid-template-columns: 3fr 1fr 1fr;
}

.accordion-head {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    padding: 0 35px;
    border-bottom: 1.5px solid #DEEAEB;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    <select id="price-filter" >
        <option id="show-all" value=""><b>Filter by</b> Pricing Plan</option>
        <option data-search-term="100" value="100">100</option>
        <option data-search-term="200" value="200">200</option>
        <option data-search-term="300" value="300">300</option>
    </select>
    <select id="language-filter" >
        <option id="show-all-languages" value=""><b>Filter by</b> Language</option>    <!-- added value="" -->
        <option data-search-term="EN" value="EN">EN</option>
        <option data-search-term="ES" value="ES">ES</option>
        <option data-search-term="PL" value="PL">PL</option>
    </select>
</div>

<div >
    <p>Courses</p>
    <p>Languages</p>
    <p>Pricing</p>
</div>
<ul>
    <li >
        <div  style="display:none">
        </div>
        <div >
            Test 1
        </div>
        <div >
            <div  data-search-term="EN">
                EN
            </div>
        </div>
        <div >
            <div  data-search-term="100">
                100
            </div>
        </div>
    </li>
    <li >
        <div  style="display:none">
        </div>
        <div >
            Test 2
        </div>
        <div >
            <div  data-search-term="EN ES">
                EN ES
            </div>
        </div>
        <div >
            <div  data-search-term="100 200">
                100 200
            </div>
        </div>
    </li>
    <li >
        <div  style="display:none">
        </div>
        <div >
            Test 3
        </div>
        <div >
            <div  data-search-term="ES">
                ES
            </div>
        </div>
        <div >
            <div  data-search-term="300">
                300
            </div>
        </div>
    </li>
    <li >
        <div  style="display:none">
        </div>
        <div >
            Test 4
        </div>
        <div >
            <div  data-search-term="PL EN">
                PL EN
            </div>
        </div>
        <div >
            <div  data-search-term="100">

                100
            </div>
        </div>
    </li>
</ul>