时间戳

首页 > 解决方案 > jquery过滤器搜索应该根据文本选择匹配的DIV

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

问题描述

我正在使用 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>

标签： javascriptjqueryhtml

解决方案

而不是*，您只需要放入div.CompanyDirectoryItem将返回整个 div 而不仅仅是匹配元素的 jquery 选择器

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

推荐阅读