CODEWITHSUNDEEP
javascriptjqueryjquery-mobilebootstrap-4
deejay217
deejay217

Reputation: 109

Filter list and its children in jquery

This is my html code:

<input class="form-control" id="myInput" type="text" placeholder="Search..">
<ul class="list-group" id="myList" data-role="listview" data-divider-theme="a" data-inset="true">
    <li data-role="list-divider" role="heading" class="list-group-item">
         <h1>b - B</h1>
    </li>
    <li data-role="collapsible" data-inset="false">
         <h3>backbiting</h3>
             <div class="card">
                 <div class="card-body text-left">
                      <div class="card-text"><p>Loreum Ipsum</p></div>
                 </div>
             </div>
    </li>

This is the jquery I am using:

$("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myList h3").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
});

I want search/filter to work on li > h3 element and the above code is working but I am not able to hide cards under every list. How should I do that ?

enter image description here

Upvotes: 0

Views: 653

Answers (1)

Ankit Agrawal
Ankit Agrawal

Reputation: 611

I think you are you are getting problem in hiding the li also along with h3. Here, you have select only #myList h3 so only that segment will be hide on filter. To hide li along with that you have to select both the elements i.e., parent of that element. So, instead of select #myList h3 select #myList li and in filter use $(this).find('h3').text() for filter like below...

$("#myInput").keyup(function() {
        var value = $(this).val().toLowerCase();
        $("#myList li").filter(function() {
            $(this).toggle($(this).find('h3').text().toLowerCase().indexOf(value) > -1)
        });
    });

I think this should solve your problem.

Upvotes: 1

Related Questions