简单的jQuery搜索过滤器

Question

嗨，我正在等待仅搜索h6，但是当搜索h6时，我想隐藏与h6相关的p？

$(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>

Answer 1

您可以使用$("#my-list > li")作为选择器，并使用.find()查找<h6>

注意：filter()回调函数期望布尔值返回

$(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>

Answer 2

只需在过滤器的回调函数中添加.closest('li')

$(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>

Answer 3

• 使用.siblings。它将在<p>的父元素中检查<h6>。
• 使用.each()代替.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>