Display message no search result when value not matched with any div items using jquery

Question

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

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

use `.html("No result found")` with the selector where you want to display. — Vishvadeep singh, Jul 13 '17 at 05:58
Not a great solution, but i think you can add something like if($('.panel:contains("'+text+'")').length > 0 || $('.panel:contains("'+text1+'")').length || $('.panel:contains("'+text2+'")').length){// show panels}else{//message that there are no panels} — Kirill, Jul 13 '17 at 05:58

prasanth · Accepted Answer · 2017-07-13T06:06:51.077

Try with if statement error message .

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>

@ponraj89 check my updated answer. i was added code with case insensitive match .with overwrite `contains` .its help full to reduce your code lines — prasanth, Jul 13 '17 at 06:09
one more help.. is it possible to highlight the search text without additional plugin or do i need to use any plugin to highlight the search item — , Jul 31 '17 at 03:47
yes its getting highlight but the styles applied before are getting removed — , Jul 31 '17 at 14:58

score 0 · Answer 2 · answered Jul 13 '17 at 06:00

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
}

score 0 · Answer 3 · answered Jul 13 '17 at 06:03

0

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

answered Jul 13 '17 at 06:03

Parvez

23
1
8

Display message no search result when value not matched with any div items using jquery

3 Answers3