javascriptjquerykeyupjquery-filter

Show message if all Li are hidden

What i want is that if on keyup() if all the li are hidden then show a specfic div.I Following is my Jquery Code. Currently what is happening is that div is displayed when ever it 1st meets its success scenario, my fiddle will explain the scenario more.

 var showMessage = false;
    function filter(element) {
        var value = $(element).val();
        $(".dropd > li").each(function () {
            if ($(this).text().indexOf(value) > -1) {
                $(this).show();
            } else {
                showMessage = true;
                $(this).hide();
            }
        });
        if (showMessage == true) {
            alert(showMessage + '111');
            $('.dropd').find('#not_matches').hide();
        }
    }
 $('#txt_colors').keyup(function () {
        filter(this);
    });

Following is my HTML

<div id="dd2" class="wrapper-dropdown-2" tabindex="1">
   <div class="selected" style="margin-right:30px;"> select Color</div>
      <ul class="dropd"> <input id="txt_colors" type="text"/>
         <div id="not_matches" name="not_matches" style="display: none;">&nbsp;&nbsp;&nbsp;No Matching Color </div>
           <li onclick="search_ral_pantone('000000')" value="000000" style="border-right-color:#000000"><a>Black</a></li>
            <li onclick="search_ral_pantone('0000FF')" value="0000FF" style="border-right-color:#0000FF"><a>Blue</a></li>
            <li onclick="search_ral_pantone('808080')" value="000000" style="border-right-color:#808080"><a>Gray</a></li>
            <li onclick="search_ral_pantone('00FF00')" value="00FF00" style="border-right-color:#00FF00"><a>Green</a></li>
            <li onclick="search_ral_pantone('800000')" value="800000" style="border-right-color:#800000"><a>Maroon</a></li>
            <li onclick="search_ral_pantone('800080')" value="800080" style="border-right-color:#800080"><a>Purple</a></li>
            <li onclick="search_ral_pantone('FF0000')" value="FF0000" style="border-right-color:#FF0000"><a>Red</a></li>
            <li onclick="search_ral_pantone('C0C0C0')" value="C0C0C0" style="border-right-color:#C0C0C0"><a>Silver</a></li>
            <li onclick="search_ral_pantone('FFFFFF')" value="FFFFFF" style="border-right-color:#FFFFFF"><a>White</a></li>
            <li onclick="search_ral_pantone('FFFF00')" value="FFFF00" style="border-right-color:#FFFF00"><a>Yellow</a></li>
      </ul>
     </div>

Fiddle:http://jsfiddle.net/13y6b7jj/1/ (just to give idea as to what is actually happening)

Solution

  • You can check if any li is visible by this code:

    $(".dropd li:visible").length

    fiddle