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

Question

我正在使用 jquery 过滤器搜索来搜索由从数据库获取数据的循环生成的 DIV 列表。所以每 block 信息都有相同的 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>

Answer 1

而不是*，您只需将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