搜索功能 jQuery 不显示整个 div答案

【问题标题】：Search function jQuery don't show the whole div搜索功能 jQuery 不显示整个 div
【发布时间】：2016-05-17 11:44:37
【问题描述】：

我尝试构建一个搜索功能，通过我的<div> 所有<p> 标签。我设法完成了这项工作，但没有达到 100%。问题是最后没有显示整个<div>。仅显示与搜索结果匹配的元素。无论<p> 标签中是否存在匹配，视频都会始终显示。

所以，我希望 <thumbnail> 中的所有内容不仅显示与搜索匹配的 <p>。怎么样？

我的代码：

$('#searchField').keyup(function(){
    var valThis = $(this).val().toLowerCase();
    $('.video-list p').each(function(){
        var text = $(this).text().toLowerCase();
        (text.indexOf(valThis) == 0) ? $(this).show() : $(this).hide();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- form -->

<form id="live-search" action="" class="styled" method="post">
  <div class="col-md-4">
    <input type="text" placeholder="Title" id="searchField">
  </div>
</form>

<!-- what i'm searching through ( its repeating )-->

<div class="row upload-video video-list">
  <div class="col-md-4">
    <div class="thumbnail">

      <div class="video-part">
        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/-w8As0gln6o" frameborder="0" allowfullscreen></iframe>
      </div>
      <p class="">Tempor incididunt ut labore et dolore magna</p>
      <p class="">Horse Name</p>
    </div>
  </div>
</div>

【问题讨论】：

您的 html 将保持不变？如果视频与您的搜索文本不匹配，您也想隐藏它吗？
你需要这样http://jsbin.com/yikiwi/edit?html,js,output ??
@GarvitMangal 这是我在 2 小时内看到的带有代码的 2 个 cmets - 你不知道如何发布答案吗？
完全是 @maverickosama92 但我也希望在搜索匹配某些内容时显示整个 div
@GarvitMangal 不，如果搜索结果不匹配，我希望不显示缩略图 div，如果匹配，我希望显示整个缩略图 div 及其所有内容。

标签： javascript jquery html search

【解决方案1】：

你可以这样做

 $('#searchField').keyup(function(){
    var valThis = $(this).val().toLowerCase();

  var p_ele = $(".video-list .thumbnail");
  p_ele.each(function(){
    var present = $(this).children("p").text().toLowerCase();
  if(present.indexOf(valThis) == -1){
    $(this).hide();
  }else{
    $(this).show();
  }
  });
});

演示：http://jsbin.com/rasuho/edit?js,output

【讨论】：

【解决方案2】：

这里是 JS：

var filterFunc = function($parent, valThis){
  var $p = $parent.find("p");
  var found = $p.filter(function(el){          
    return $(this).text().toLowerCase().indexOf(valThis) > -1;
  });

  //hides parent div if we have not found in any of 'p'
  if(found && found.length == 0){
    $parent.hide();
  }else{
    $parent.show();
  }
}

$('#searchField').keyup(function(){
  var valThis = $(this).val().toLowerCase();
  $('.video-list').each(function(){
    filterFunc($(this), valThis);
  });
});

工作小提琴： http://jsfiddle.net/H6rQ6/16956/

【讨论】：

当写例如“马”时，只有那个 p-tag 显示出来，而且他们两个
@teninchhero：在这种情况下，您只想显示 p-tag？
不，我希望显示缩略图 div 中的所有内容
@teninchhero: "Horse" 字符串只在一个 p-tag 中匹配，而不在其他标签中匹配，那么如果它里面不包含文本，为什么会显示呢？
也许我的描述有点不清楚。缩略图 div 在代码中不止一个，我只是添加了一个作为示例。每个缩略图都包含有关同一视频的信息，您可以按视频名称（第一个 p）和马名（第二个 p）搜索这就是为什么我希望显示缩略图中的所有内容

【解决方案3】：

$(this).hide() 将隐藏当前元素意味着这里p 所以使用$(this).parent().hide()

$('#searchField').keyup(function(){
    var valThis = $(this).val().toLowerCase();
    $('.video-list p').each(function()
    {
       var text = $(this).text().toLowerCase();
       (text.indexOf(valThis) == 0) ? $(this).parent().show() : $(this).parent().hide();
    });
});

【讨论】：

【解决方案4】：

如果搜索词出现在任何div.thumbnail P 中，您想要实现的只是显示div.thumbnail 项目。（由于您给定的 html 是有限的，我假设重复的父包装标记将是 div.thumbnail）

但是您在每个 P 标签上单独调用您的 show/hide function，这会使函数触发而不管它是 siblings 结果（例如：即使搜索词出现在 div.thumbnail p:nth-of-type[1] 中，这仍然会触发 hide()，因为在 div.thumbnail p:nth-of-type[2] 中找不到它）

因此，您应该将show/hide function 作为一个整体附加到两个子标签文本结果中。见下文

$('#searchField').keyup(function(){
    var valThis = $(this).val().toLowerCase();
    $('.thumbnail')
    .hide()                     // reset display val of .thumbnail
    .filter(function(){         // get items with search-text only 
        var pTxt = $('p',this).text().toLowerCase();
        return ( pTxt.indexOf(valThis) != -1 ) ?  this : '' ;    
    })
    .show('fast');              // show items with search-text
});

see demo

【讨论】：