Показать сообщение, если все ли скрыты

Question

Что я хочу, так это то, что если на keyup(), если все ли скрыты, то покажите specfic div.I. Ниже приведен мой код Jquery. В настоящее время происходит то, что div отображается, когда он 1-й встречает свой сценарий успеха, моя скрипка объяснит сценарий больше.

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); 
    }); 

Ниже мой 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/ (просто чтобы дать представление о том, что на самом деле происходит)

Answer 1

Вы можете проверить, если любой литий виден этим кодом:

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

fiddle

Answer 2

теперь я вижу проблему. Вы могли бы сделать что-то вроде:

if ($(".dropd > li:visible").length === 0) 

DEMO HERE

Answer 3

вы должны использовать это:

function filter(element) { 
 
      var value = $(element).val(); 
 
      var count = 0; 
 
      $(".dropd > li").each(function() { 
 
       if ($(this).text().indexOf(value) > -1) { 
 
        $(this).show(); 
 
        count++; 
 
       } else { 
 
        $(this).hide(); 
 
       } 
 
      }); 
 
      if (count != 0) 
 
      { 
 
       $('.dropd').find('#not_matches').hide(); 
 
      } 
 
      else{ 
 
       $('.dropd').find('#not_matches').show(); 
 
      } 
 
     }

JSFiddle

Answer 4

Вы можете использовать .is() и :visible.

Если селектор прошел в .is, по крайней мере, один элемент в стеке, он вернет true. Вы просто должны инвертировать возвращаемое значение:

function filter(element) { 
    var value = $(element).val(); 
    var $li = $(".dropd > li").each(function() { 
     if ($(this).text().indexOf(value) > -1) { 
      $(this).show(); 
     } else { 
      $(this).hide(); 
     } 

     // Alternative code here : 
     // $(this).toggle($(this).text().indexOf(value) > -1); 
    }); 
    if (! $li.is(':visible')) { 
     alert(showMessage + '111'); 
     $('.dropd').find('#not_matches').hide(); 
    } 
} 

Fiddle

Answer 5

вам просто нужно изменить код. Вы скрываете сообщение, где вам нужно показать, и наоборот

if (showMessage) { 
     $('.dropd').find('#not_matches').show(); 
    } else { 
      $('.dropd').find('#not_matches').hide(); 
      }