javascript - 当值与使用 jquery 的任何 div 项目不匹配时显示消息无搜索结果

Question

这是我用于搜索 div 项目的 jQuery，我得到了正确的搜索结果，但是当没有文本匹配时，它应该显示一条消息，如没有搜索结果

$(document).ready(function(){
 $('#search').keyup(function(){

  // Search text
  var text1 = $(this).val();
  var text = this.value.toUpperCase();
  var text2 = this.value.toLowerCase();

  // Hide all content class element
  $('.panel').hide();

  // Search and show
  $('.panel:contains("'+text+'")').show();
   $('.panel:contains("'+text1+'")').show();
   $('.panel:contains("'+text2+'")').show();

 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-custom" style="visibility: visible; display: block;">
    <div class="panel-heading" role="tab" id="headingtwentyfour">
        <h4 class="panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapsetwentyfour" aria-expanded="false" aria-controls="collapsetwentyfour">
                <i class="glyphicon glyphicon-plus"></i>
               I attend the same training 2 years back, am I allowed to attend it again?
            </a>
        </h4>
    </div>
    <div id="collapsetwentyfour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingtwentyfour">
        <div class="panel-body animated zoomOut">
            The participant need not attend any course more than once until his/her validity of the certificate is minimal for which they can't take up a refreshment course.
        </div>
    </div>
</div>

Answer 1

尝试使用 if 语句错误消息。

已更新

并在contains case insensitive中进行大小写匹配

$(document).ready(function() {
  $('#search').keyup(function() {
    var text = this.value
    $('.panel,.error').hide();

    // Search and show
    $('.panel:contains("' + text + '")').show();
    if($('.panel:contains("' + text + '")').length < 1) {
      $('.error').show();
    }
  });
});
jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

.error{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search">
<div class="panel panel-custom" style="visibility: visible; display: block;">
  <div class="panel-heading" role="tab" id="headingtwentyfour">
    <h4 class="panel-title">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapsetwentyfour" aria-expanded="false" aria-controls="collapsetwentyfour">
        <i class="glyphicon glyphicon-plus"></i> I attend the same training 2 years back, am I allowed to attend it again?
      </a>
    </h4>
  </div>
  <div id="collapsetwentyfour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingtwentyfour">
    <div class="panel-body animated zoomOut">
      The participant need not attend any course more than once until his/her validity of the certificate is minimal for which they can't take up a refreshment course.
    </div>
  </div>

</div>
<span class="error"> --no result--</span>