CODEWITHSUNDEEP
jqueryhtml
Jonny Jordan
Jonny Jordan

Reputation: 407

Simple jQuery search filter

Hi I'm waiting to search just the h6, but when the h6 is search I would like to hide the p associated to the h6?

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#my-list h6").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search dictionary..">

<ul id="my-list">
  <li>
    <h6>act</h6>
    <p>test test</p>
  </li>
  <li>
    <h6>bact</h6>
    <p>test test2</p>
  </li>
  <li>
    <h6>bfffff</h6>
    <p>test test3</p>
  </li>
</ul>

Upvotes: 0

Views: 2116

Answers (3)

Deepak gupta
Deepak gupta

Reputation: 554

  • Use .siblings. It will check for <p> in the parent element of <h6>.
  • Use .each() instead of .filter().

 $(document).ready(function () {
        $("#myInput").on("keyup", function () {
            var value = $(this).val().toLowerCase();


            $("#my-list h6").each(function () {
                
                if($(this).text().toLowerCase().indexOf(value) > -1){
                    $(this).siblings("p").hide();
                }else{
                    $(this).siblings("p").show();
                }


                // $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

            });
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search dictionary..">

<ul id="my-list">
  <li>
    <h6>act</h6>
    <p>test test</p>
  </li>
  <li>
    <h6>bact</h6>
    <p>test test2</p>
  </li>
  <li>
    <h6>bfffff</h6>
    <p>test test3</p>
  </li>
</ul>

Upvotes: 0

Eddie
Eddie

Reputation: 26854

You can use $("#my-list > li") as selector and use .find() to find the <h6>

Note: filter() callback function expects a bool return value

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();

    $("#my-list > li").show().filter(function() {                           //Select all li and show
      return $(this).find('h6').text().toLowerCase().indexOf(value) === -1;  //Find the h6 and check if the value is substring of the text. Return true if not found.
    }).hide();                                                          //Hide all li that that the value is not the substring of text
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search dictionary..">

<ul id="my-list">
  <li>
    <h6>act</h6>
    <p>test test</p>
  </li>
  <li>
    <h6>bact</h6>
    <p>test test2</p>
  </li>
  <li>
    <h6>bfffff</h6>
    <p>test test3</p>
  </li>
</ul>

Upvotes: 3

JoinCompany
JoinCompany

Reputation: 514

just add .closest('li') in callback function of filter

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#my-list h6").each(function() {
      var toggle = $(this).text().toLowerCase().indexOf(value) > -1;
      $(this).closest('li').toggle(toggle);
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search dictionary..">

<ul id="my-list">
  <li>
    <h6>act</h6>
    <p>test test</p>
  </li>
  <li>
    <h6>bact</h6>
    <p>test test2</p>
  </li>
  <li>
    <h6>bfffff</h6>
    <p>test test3</p>
  </li>
</ul>

Upvotes: 1

Related Questions