代码之家 › 专栏 › 技术社区 › Slowboy

jquery filter search应该根据文本选择匹配的div

html jquery javascript

Slowboy · 技术社区 · 6 年前

我使用jquery filter search搜索从数据库获取数据的循环生成的DIV列表。因此,每一块信息都有相同的Div围绕着它自己。

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

我想让我的搜索做的是,例如,如果我搜索公司2,我希望所有与该公司有关的信息显示出来。

希望有人能帮我。

$(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>

1 回复 | 直到 6 年前

Bhushan Kawadkar 6 年前

而不是 * ,你只需要把 div.CompanyDirectoryItem

$(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