当值与使用jquery的任何div项不匹配时，显示消息没有搜索结果

Here is my jQuery to search on div items, i am getting the search results correctly but when there is no text match it should display a message like no search results

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

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

3 个解决方案

#1

Try with if statement error message .

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

Updated

更新

And do with uppercase and lowercase match in 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>

#2

Possibly something like this?

可能是这样的吗？

var test = $('.panel:contains("'+text+'")'),
   test1 = $('.panel:contains("'+text1+'")'),
   test2 = $('.panel:contains("'+text2+'")');

if( !test.length && !test1.length && !test2.length){
   // show your message for no results
}

#3

I think the problem is you are changing the visibility to none and then showing your results.Try removing $('.panel').hide();

我认为问题是你将可见性改为无，然后显示你的结果。尝试删除$（'。panel'）。hide（）;

#1