Javascript 基于搜索显示元素

我希望.box元素根据用户搜索的单词显示/隐藏，因此，例如，如果用户键入“Title2 Title1”，因为这些单词存在于框1和框2中，它们将在重命名.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>

方框标题1
框标题一内容
方框标题2
框标题二内容
方框标题3
框标题三内容
$（“#搜索”）。关于（“输入”，函数（）{
var search=$（this.val（）；
如果（搜索！==“”）{
var searchArray=search.split（“”）；
searchArray.forEach（函数（searchWord）{
$（“.box”）。每个（函数（）{
if（$（this）.is（':contains（'+searchWord+'）））{
$（this.show（）；
}否则{
$（this.hide（）；
}
});
});
}否则{
$（“.box”）.show（）；
}
});

循环遍历所有

.box

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

我也摆弄过它

---

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

$（“#搜索”）。关于（“输入”，函数（）{
var search=$（this.val（）；
如果（搜索！==“”）{
var searchArray=search.split（“”）；
//隐藏所有。框
$（“.box”）。每个（函数（）{
$（this.hide（）；
})
forEach（函数（searchWord）{
$（“.box”）。每个（函数（）{
if（$（this）.is（':contains（'+searchWord+'）））{
$（this.show（）；
}
});
});
}否则{
$（“.box”）.show（）；
}
});

方框标题1
框标题一内容
方框标题2
框标题二内容
方框标题3
框标题三内容
您需要使用不同的搜索方法<代码>：包含的

无法按预期工作。考虑下面的例子。

$（函数（）{
函数过滤器（e）{
var term=$（e.target）.val（）；
如果（术语长度<3）{
$（“.box”）.show（）；
返回；
}
$（“.box”）。每个（函数（i，el）{
if（$（“.content”，el）.text（）.indexOf（term）>=0）{
$（el.show（）；
}否则{
$（el.hide（）；
}
});
}
$（“#搜索”）.keyup（过滤器）；
});

方框标题1
框标题一内容
方框标题2
框标题二内容
方框标题3
框标题三内容
您应该详细解释您想要实现的其余部分
$("#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(); 
      }


    })
})