Takami
Takami

Reputation: 115

Jquery search function hides all elements

i have a small problem with Jquery, i want to filter "items" on my cart, this code actually filter but it shows only the "li" but not their child items, i mean it hides everything and only shows the actual element

i want it to filter without hiding their "child" elements, enter image description here

enter image description here

enter image description here

                <div class="section_wrapper">
                    <ul id="prod_list">
                        <li>                                  
                            <a href="#" >
                                <div>
                                    <h5>Asus Crossfire MotherBoard LGA 775</h5>
                                    <div>
                                        <ul>
                                            <li>64 bits</li>
                                            <li>Super</li>
                                        </ul>
                                    </div>
                                </div>
                            </a>

                        </li>   

The Jquery Code:

function search_filter() {
    $('#busqueda').click(function() {
        if ($(this).val() == "Buscar...") {
            $(this).val("");
        }
    }).blur(function() {
        if ($(this).val() == "") {
            $(this).val("Buscar...");
        }
    }).on('input', function() {
        busca = $(this).val();

        $("#prod_list li").each(function() {
            var elem = $(this).children('a');
            var reg = new RegExp(busca, "i");
            if (reg.test(elem.text())) {
                if ($(this).is(':hidden')) {
                    $(this).fadeIn('fast').css("display", "block");                    
                }

            } else {

                $(this).fadeOut('fast');
            }
        });
    });
}  

Upvotes: 0

Views: 53

Answers (1)

Z2VvZ3Vp
Z2VvZ3Vp

Reputation: 7593

It's probably because within #prod_list you have li > a > div > div > ul > li

And the last li's are failing

if (reg.test(elem.text())) {

so are getting the fadeout. You can fix this by just doing

$("#prod_list > ul > li").each(function() {

Instead.

Upvotes: 1

Related Questions