jquery过滤器搜索应根据文本选择匹配的DIV

Posted 2023-01-19

我正在使用jquery过滤器搜索来搜索由从数据库中获取数据的循环生成的DIV列表。因此，每一小部分信息都有相同的Div自我包裹。

我的问题是搜索正在搜索整个文本并排除与搜索无关的所有内容。

这是一个Fiddle，显示我的代码现在如何工作。

我希望我的搜索功能是，例如，如果我搜索公司2，我希望显示与该公司相关的每一条信息。

希望有人可以帮助我。

这是jquery

$(document).ready(function()
   $("#searchInput").on("keyup", function() 
    var value = $(this).val().toLowerCase();
    $("#searchFilterDiv *").filter(function() 
   $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  );
 );
);

这是html。在现实生活中，大约有50个div，都有相同类型的CompanyDirectoryItem，但它的data-name是从数据库生成的。

<input id="searchInput" type="text" placeholder="text"></input>

 <div id="searchFilterDiv">

   <div class="CompanyDirectoryItem" data-name="some-data">  
    <h3> Some Company</h3>
      <a>some-data</a>
      <p> some text</p> 
   </div> 


   <div class="CompanyDirectoryItem" data-name="other-data">  
    <h3> Company 2 </h3>
     <a>other-data</a>
     <p>part of stuff</p> 
   </div> 

   <div class="CompanyDirectoryItem" data-name="data-of-data">  
    <h3> Company 3 </h3>   
     <a>data-of-data</a>
     <p>sportsware company</p> 
     <p>adress</p>  
   </div> 

 </div>

答案

而不是*，你只需要将div.CompanyDirectoryItem放在jquery选择器中，它将返回整个div而不仅仅是匹配元素

$(document).ready(function()
  $("#searchInput").on("keyup", function() 
    var value = $(this).val().toLowerCase();
    $("#searchFilterDiv div.CompanyDirectoryItem").filter(function() 
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    );
  );
);

JSfiddle