CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32321

How to display No Records Found Message for div search on keyup

I am searching the div as user enters input . Incase there are no records I should display a message a No Records

Incase i press 'H' inside search its initially displaying message as 'No Records '

This is my js code 

$('#searchequip').keyup(function()
{
        var val = $.trim(this.value).toUpperCase();
        $(".mt-checkbox").each(function()
        {
                var parent = $(this).closest('li'),
                        length = $(this).text().length > 0;
                if (length && $(this).text().search(new RegExp(val, "i")) < 0)
                {
                        parent.fadeOut("slow");
                        console.log('Nothing Found ');
                        $("#errmsg").html("No Results Found").show().fadeOut("slow");
                }
                else
                {
                        parent.show();
                }
        });
})

This is my fiddle

http://jsfiddle.net/cod7ceho/228/

Upvotes: 0

Views: 1711

Answers (3)

Gaurav Ojha
Gaurav Ojha

Reputation: 1177

The problem is that you're updating the #errmsg span in your each loop, whereas what you should actually be doing is updating it at the end when you're done searching. Check out the updated code.

$('#searchequip').keyup(function()
{
        var val = $.trim(this.value).toUpperCase();
        var length = false;
        var globalfound = -1;
        $(".mt-checkbox").each(function()
        {
              var parent = $(this).closest('li');
              length = $(this).text().length > 0;
              localfound = $(this).text().search(new RegExp(val, "i"));
              if (globalfound < 0) { globalfound = localfound; }
              if (length && localfound < 0)
                {
                     parent.fadeOut("slow");
                } else {
                     parent.show();
                }
        });
        if (length && globalfound < 0) {
             console.log('Nothing Found ');
             $("#errmsg").html("No Results Found").show().fadeOut("slow");
        } else {
             $("#errmsg").html("No Results Found").hide()
        }
})
#errmsg
{
color: red;
}
<div class="searchWrap">
   <div class="input-icon">
      <i class="fa fa-search"></i>
      <input class="form-control" type="text" id="searchequip" placeholder="Search">    
   </div>
</div>
<span id="errmsg"></span>

<div class="portlet-body equipment-body">
   <div class="propsContainer">
      <div class="propsContent">
         <ul id="equipdetails">
            <li style="display: list-item;">
               <div class="col-lg-8">
               <label data-equipid="3" class="mt-checkbox mt-checkbox-outline exercise-txt">
               <input type="checkbox">Hillary Clinton<span></span>
               </label>
               </div>
               <div class="col-lg-4">
                  <div class="exercise-img"></div>
               </div>
            </li>
            <li style="display: list-item;">
               <div class="col-lg-8">
               <label data-equipid="4" class="mt-checkbox mt-checkbox-outline exercise-txt">
               <input type="checkbox">Donald Trump<span></span>
               </label>
               </div>
               <div class="col-lg-4">
                  <div class="exercise-img"></div>
               </div>
            </li>
         </ul>
      </div>
   </div>
</div>

Upvotes: 0

Eren Akkus
Eren Akkus

Reputation: 471

This is the code; http://jsfiddle.net/cod7ceho/246/

$('#searchequip').keyup(function (){
  var val = $.trim(this.value).toUpperCase();
  var noElem = true;
  $('.mt-checkbox').each(function (){
    var parent = $(this).closest('li'),
    length = $(this).text().length > 0;
    if (length && $(this).text().search(new RegExp(val, 'i')) < 0)
    {
      parent.fadeOut('slow');
    }else{
      noElem = false;
      parent.show();
    }
  });
  if (noElem)
    $('#errmsg').html('No Results Found').show().fadeOut('slow');
})

Upvotes: 2

Batu.Khan
Batu.Khan

Reputation: 3065

I suggest you define a flag variable to determine if the word is found or not then do the showing "No Results Found" text after each function :

var val = $.trim(this.value).toUpperCase();
var found = false;
$(".mt-checkbox").each(function() {
    var parent = $(this).closest('li'),
        length = $(this).text().length > 0;
    if (length && $(this).text().search(new RegExp(val, "i")) < 0) {
        parent.fadeOut("slow");
        console.log('Nothing Found ');
    } else {
        found = true;
        parent.show();
    }
});

if (!found) $("#errmsg").html("No Results Found").show().fadeOut("slow");

UPDATED FIDDLE

Upvotes: 2

Related Questions