根据搜索显示元素答案

【问题标题】：Displaying elements based on search根据搜索显示元素
【发布时间】：2020-08-03 06:41:57
【问题描述】：

我希望 .box 元素根据用户搜索的字词显示/隐藏，例如，如果用户键入“Title2 Title1”，因为这些字词存在于框一和框二内，它们将通过重命名 .box 元素隐藏。 .box 元素中的所有文本都需要可搜索，而不仅仅是 .title 元素中的文本。

下面是我已经走了多远。它几乎就在那里，但它并没有像希望的那样工作。

任何帮助都会很棒。

非常感谢。

<input placeholder="Search" id="search" type="text" />

<div class="box">
   <div class="title">Box Title1</div>
   <div class="content">
      Box title one content
   </div>
</div>
<div class="box">
   <div class="title">Box Title2</div>
   <div class="content">
      Box title two content
   </div>
</div>
<div class="box">
   <div class="title">Box Title3</div>
   <div class="content">
      Box title three content
   </div>
</div>

<script>
$("#search").on("input", function () {

   var search = $(this).val();

   if (search !== "") {

      var searchArray = search.split(" ");

      searchArray.forEach(function(searchWord) {

         $(".box").each(function () {

            if($(this).is(':contains('+ searchWord +')')) {
               $(this).show();
            } else {
               $(this).hide();
            }

         });

   });

   } else {
      $(".box").show();
   }

});
</script>

【问题讨论】：

你应该解释更多你想要实现的剩余部分

标签： javascript jquery arrays string loops

【解决方案1】：

您需要使用不同的搜索方法。 :contains 无法按预期工作。请考虑以下示例。

$(function() {
  function filter(e) {
    var term = $(e.target).val();
    if (term.length < 3) {
      $(".box").show();
      return;
    }
    $(".box").each(function(i, el) {
      if ($(".content", el).text().indexOf(term) >= 0) {
        $(el).show();
      } else {
        $(el).hide();
      }
    });
  }
  $("#search").keyup(filter);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Search" id="search" type="text" />

<div class="box">
  <div class="title">Box Title1</div>
  <div class="content">Box title one content</div>
</div>
<div class="box">
  <div class="title">Box Title2</div>
  <div class="content">Box title two content</div>
</div>
<div class="box">
  <div class="title">Box Title3</div>
  <div class="content">Box title three content</div>
</div>

例如，如果输入on，则不执行过滤。如果输入one，脚本将在每个box 的content 类内部查找，如果在文本中找到one，则会显示，否则隐藏。如果用户清除搜索，则显示所有项目。

【讨论】：

【解决方案2】：

在迭代之前隐藏所有框，然后仅在匹配任何单词时显示：

$("#search").on("input", function () {

   var search = $(this).val();

   if (search !== "") {

      var searchArray = search.split(" ");

      // Hide all .box
      $(".box").each(function () {
        $(this).hide();
      })
      
      searchArray.forEach(function(searchWord) {         
         $(".box").each(function () {
            if($(this).is(':contains('+ searchWord +')') ) {
               $(this).show();
            }

         });

   });

   } else {
      $(".box").show();
   }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input placeholder="Search" id="search" type="text" />

<div class="box">
   <div class="title">Box Title1</div>
   <div class="content">
      Box title one content
   </div>
</div>
<div class="box">
   <div class="title">Box Title2</div>
   <div class="content">
      Box title two content
   </div>
</div>
<div class="box">
   <div class="title">Box Title3</div>
   <div class="content">
      Box title three content
   </div>
</div>

【讨论】：

【解决方案3】：

遍历所有.boxs 并使用正则表达式模式匹配，检查标题或内容是否与搜索查询匹配。显示所有匹配的框并隐藏所有其他框

我也玩过here

$("#search").on("input", function () {

      var searchables=$('.box');
      console.log(searchables)
      var query=$(this).val();
      searchables.each(function(i,item){

      var title=$(item).find('.title').text();     
      var content=$(item).find('.content').text();
      var rgx=new RegExp(query,'gi');

      if(rgx.test(title) || rgx.test(content))
      {
                $(item).show();               
      }
      else
      {
                $(item).hide(); 
      }


    })
})

【讨论】：