实时HTML搜索栏

我现在正在做一个自助项目，并试图实现一个使用jQuery过滤div的实时搜索栏。我希望在div中有div，当它根据搜索栏进行过滤时，它会删除连接到它的所有其他div，并且只显示名称。我已经粘贴了我的jQuery（来源于internet）和HTML文件下面的代码。我觉得这很容易解决，但我不确定

jQuery：

<script>
   $(document).ready(function(){
      $("#myInput").on("keyup", function() {
         var value = $(this).val().toLowerCase();
         $("#contentsBox *").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
         });
      });
   });
</script>

$（文档）.ready（函数（）{
$（“#myInput”）。在（“keyup”，function（）上{
var value=$（this.val（）.toLowerCase（）；
$（“#contentsBox*”）.filter（函数（）{
$（this）.toggle（$（this）.text（）.toLowerCase（）.indexOf（value）>-1）
});
});
});

Html:

#搜索栏
搜寻
#压缩箱
{%用于卡车中的卡车%}
{%endfor%}

卡车[x]信息已通过python发送，并通过链接连接到使用数据创建的数据库：

生成的框如下所示：

目前，当我对其进行过滤时：

---

因此，我希望它能像搜索第一张图片时看到的那样，将所有内容都保存在里面

请不要乱叫。您反复地使用

Java

Java

是一种服务器端语言，与

JavaScript

不同（客户端语言从浏览器运行）。但是，您的代码片段表示与Java和JS不同的

jQuery

。

$（“#contentsBox*”）

查看contentsBox中的每个元素（包括

，

，

等）`。您需要一个比这更具体的选择器，并且只切换每个产品的container@tacoshy很抱歉，我对所有代码的名称和类型都还不熟悉。我的错。@charlietfl我该怎么做才能让它更具体些？我能说`$（“#contentsBox.id”）``你有什么建议吗？更像是

$（“#contentsBox.truckContent”）。过滤器
#Search Bar
<div class="search-bar">
   <form action="#">
      <input type="text" id="myInput" placeholder="Search.." name="search">
      <button type="submit">Search</button>
   </form>
</div>

#Genrated Boxs
{% for truck in trucks %}
   <div class="truckContent">
      <a href="/foodtrucks/{{truck[1]}}">
         <div class="truck-coverImg">
            <img src={{truck[11]}} alt={{truck[12]}}>
         </div>
         <div class="truck-logo">
            <img src={{truck[6]}} alt={{truck[7]}}>
         </div>
         <div class="truck-name" id="truck-name">
            <h4>{{truck[1]}}</h4>
         </div>
         <div class="truck-category">
            <h4>{{truck[2]}}</h4>
         </div>
      </a>
   </div>
{% endfor %}