Div element is empty not working in Jquery

Question

i have a search filter, i want, if search result is empty, div element will disappear. But it's not working. I have added snippet, if filter find any record, div element will be disappear. For example; i search "serhat", id=sakla1 disappear, only seem id=sakla2, i tried some method but it's not working, how can i solve this?

$("#msj1").hide();
$("#msj2").hide();


$(".quick_search_input").keyup(function() {

  var quick_search_input_val = $(".quick_search_input").val().toLowerCase();
  $(".panel ul li").each(function(index) {
    var element_val = $(this).text();
    if (element_val.toLowerCase().indexOf(quick_search_input_val) >= 0) {
      $(this).show();
      $("#msj1").hide();

      $('#baslik1').show();
      // $('#baslik2').show();

    } else {
      $(this).hide();
      if ($('.panel ul li:visible').length == 0) {
        $("#msj1").show();
        $("#msj2").show();

      } else {
        $("#msj1").hide();
        $("#msj2").hide();
      }

      // $("#asit").hide();
      // $("#isit").hide();
      // if (!$.trim($('div#ilk').val())) {
      // 	$('#baslik1').hide();
      // }
      // if (!$.trim($('div#ikinci').val())) {
      // 	$('#baslik2').hide();
      // }
    }


    // if (!$.trim( $('#ilk').html() ).length ) {
    // 	$("#msj1").show();
    // }else{
    // 	$("#msj1").hide();
    // }


    // if (!$.trim($('div#ilk').val())) {
    // 	$('#baslik1').html("Kayıt yok")
    // }
    // else{
    // 	$('#baslik1').html("Ana Site İçerik Tip")
    // }

    // if (!$.trim($('.quick_search_input').val())) {
    // 	$('#baslik1').show();
    // }

    // if (!$.trim($('div#ikinci').val())) {
    // 	$('#baslik2').hide();
    // 	$('#ikinci').hide();
    // }

    // if (!$.trim($('.quick_search_input').val())) {
    // 	$('#baslik2').show();
    // 	$('#ikinci').show();
    // }

  }); // Elementler döngüye alınıyor -- Bitiş
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group has-feedback">
  <input type="text" class="form-control quick_search_input" placeholder="BUL">
  <div class="form-control-feedback">
    <i class="icon-search4 text-size-base"></i>
  </div>
</div>


<div class="panel-group accordion-sortable content-group-lg" id="accordion-controls" style="margin-top:0px">
  <div id="sakla1">
    <div class="panel" id="baslik1">
      <div class="panel-heading bg-blue-800" id="asit">
        <h6 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion-controls" href="#accordion-controls-group1">Ana Site
													İçerik Tip</a>
        </h6>
        <div class="heading-elements">
          <ul class="icons-list">
            <li>
              <a data-action="reload"></a>
            </li>
          </ul>
        </div>
      </div>
      <div id="accordion-controls-group1" class="panel-collapse collapse in">
        <div class="panel-body" id="ilk">
          <div id="msj1">Gösterilecek kayıt bulunamadı.</div>
          <div class="tree-default" id="agac1">
            <ul>
              <li class="folder expanded">Haberler
                <ul>
                  <li class="expanded">Ana Sayfa Haberleri
                    <ul>
                      <li class="active focused">Öne Çıkan Haber</li>
                      <li class="selected">Ana Sayfa Diğer</li>
                    </ul>
                  </li>
                  <li>İkinci derece haberler
                    <ul>
                      <li>İlk Kırılım</li>
                      <li>İkinci Derece Kırılım</li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class="has-tooltip" title="Burası Önemli!">Mouse Over ToolTipi</li>
              <li class="folder">Duyurular
                <ul>
                  <li>Ana Sayfa Duyurular</li>
                  <li>Diğer Duyurular</li>
                </ul>
              </li>
              <li>Bilgi</li>
              <li>Foto Galeri
                <ul>
                  <li>Ana Sayfa Galeri</li>
                  <li>Aiğer Galeriler
                    <ul>
                      <li>Kırılım 1</li>
                      <li>Kırılım 2</li>
                      <li>Kırılım 3</li>
                      <li>Kırılım 4</li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- buraya da içerik ekleyip dene, boşsa mavi başlıklar da gitsin, eğer iç site içerik yoksa ona göre if yaz -->
  <div id="sakla2">
    <div class="panel" id="baslik2">
      <div class="panel-heading bg-blue-800" id="isit">
        <h6 class="panel-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion-controls" href="#accordion-controls-group2">İç
													Site İçerik Tip</a>
        </h6>
        <div class="heading-elements">
          <ul class="icons-list">
            <li>
              <a data-action="reload"></a>
            </li>
          </ul>
        </div>
      </div>
      <div id="accordion-controls-group2" class="panel-collapse collapse in">
        <div class="panel-body" id="ikinci">
          <div id="msj2">Gösterilecek kayıt bulunamadı.</div>
          <div class="tree-default">
            <ul>
              <li class="folder expanded">serhat
                <ul>
                  <li class="expanded">halil
                    <ul>
                      <li class="active focused">silsüpür</li>
                      <li class="selected">Ana Sayfa Diğer</li>
                    </ul>
                  </li>
                  <li>fenerbahçe
                    <ul>
                      <li>İlk Kırılım</li>
                      <li>İkinci Derece Kırılım</li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class="has-tooltip" title="Burası Önemli!">Mouse Over ToolTipi</li>
              <li class="folder">Duyurular
                <ul>
                  <li>Ana Sayfa Duyurular</li>
                  <li>Diğer Duyurular</li>
                </ul>
              </li>
              <li>Bilgi</li>
              <li>Foto Galeri
                <ul>
                  <li>Ana Sayfa Galeri</li>
                  <li>Aiğer Galeriler
                    <ul>
                      <li>Kırılım 1</li>
                      <li>Kırılım 2</li>
                      <li>Kırılım 3</li>
                      <li>Kırılım 4</li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Problem : if search result is empty, div element will disappear. But it's not working

Solution :

1. Remove #msj1 hide() show() condition from each loop
2. Apply that condition after ending the each loop for li
3. Use $('.panel ul li:visible').length==0 condition for hide() show()

Please check below code :

$(".quick_search_input").keyup(function () {
    var quick_search_input_val = $(".quick_search_input").val().toLowerCase();
    $(".panel ul li").each(function (index) {
        var element_val = $(this).text();
        if (element_val.toLowerCase().indexOf(quick_search_input_val) >= 0) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
    if($('.panel ul li:visible').length==0)
        $("#msj1").show();
    else
        $("#msj1").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="panel">
    <input type="text" class="quick_search_input" placeholder="Search something" />
    <div class="panel-body" id="ilk">
        <div id="msj1" style="display:none">Kayıt yok</div>
        <div class="tree-default" id="agac1">
            <ul>
                <li>India</li>
                <li>Ok, tata</li>
                <li>ipsim</li>
                <li>cool</li>
                <li>Your answer</li>
            </ul>
        </div>
    </div>
</div>