jQuery搜索框中的隐藏对象

时间:2018-09-28 07:57:44

标签: jquery search

我在jquery中做了一个搜索框过滤器。我的控件是2格。如果div中没有​​匹配项,我将隐藏该div。但是当我删除一个字符时,隐藏不回来了;

示例;我写在输入“ tr”中,似乎都是div,并且我添加“ y”写“尝试”了其他div隐藏。我删除了“ y”字符“ tr”,但其他div似乎没有。我认为如果条件错误或“ ul li:visible”错误。我该如何解决?我尝试进行更多更改,但无法解决。请帮帮我。谢谢。

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

$(".quick_search_input").keyup(function() {
  var quick_search_input_val = $(".quick_search_input").val().toLowerCase();
  if (quick_search_input_val == 0 || quick_search_input_val == null) {
    $("#msj1").hide();
    $("#msj2").hide();
    $("sakla1").show();
    $("#sakla2").show();
    $("#sakla1").removeAttr("style");
  }
  
  $(".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 ($('#sakla1 .panel ul li:visible').length === 0 && $("#sakla2 .panel ul li:visible").length === 0) {
        $("#msj1").show();
        $("#msj2").show();
        $("#sakla1").show();
        $("#sakla1").removeAttr("style");
      } else if ($('#sakla1 .panel ul li:visible').length != 0 && $("#sakla2 .panel ul li:visible").length === 0) {
        $("#msj1").hide();
        $("#msj2").show();
        $("#sakla2").hide();
      } else if ($('#sakla1 .panel ul li:visible').length === 0 && $("#sakla2 .panel ul li:visible").length != 0) {
        $("#msj1").show();
        $("#msj2").hide();
        $("#sakla1").hide();
        $("#sakla2").show();
      } else {
        return;
      }
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="form-group has-feedback">
  <input type="text" class="form-control quick_search_input" placeholder="İçerik tiplerinde ara...">
  <div class="form-control-feedback">
    <i class="icon-search4 text-size-small text-muted"></i>
  </div>
</div>
<div class="panel-group content-group-lg" style="margin-top:0px">
  <div id="sakla1">
    <div class="panel" id="baslik1">
      <div class="panel-heading bg-blue-800 panel-title" id="baslik1">
        <a data-toggle="collapse" data-parent="#accordion-controls" href="#accordion-controls-group1">Ana Site İçerik Tip</a>
      </div>
      <style type="text/css">
        .icerikTipButtonlar {
          position: absolute;
          right: 2px;
          top: 2px;
          padding: 4px;
          display: block;
          background-color: rgba(0, 0, 0, 0.2);
          display: none
        }
        
        .icerikTipButtonlar .btn {
          padding: 0 5px
        }
        
        .altug:hover~.icerikTipButtonlar {
          display: block
        }
      </style>
      <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="has-tooltip" title="Burası Önemli!">trytry</li>
              <li class="folder expanded altug">
                Haberler
                <div class="icerikTipButtonlar">
                  <a href="#" class="btn btn-info"><i class="icon-list-unordered"></i> Listele</a>
                  <a href="#" class="btn btn-success"><i class="icon-plus3"></i> Ekle</a>
                </div>
                <ul>
                  <li class="expanded">Ana Sayfa Haberleri
                    <div class="icerikTipButtonlar">
                      <a href="#" class="btn btn-info"><i class="icon-list-unordered"></i> Listele</a>
                      <a href="#" class="btn btn-success"><i class="icon-plus3"></i> Ekle</a>
                    </div>
                    <ul>
                      <li class="active focused">Öne Çıkan Haber
                        <div class="icerikTipButtonlar">
                          <a href="#" class="btn btn-info"><i class="icon-list-unordered"></i> Listele</a>
                          <a href="#" class="btn btn-success"><i class="icon-plus3"></i> Ekle</a>
                        </div>
                      </li>
                      <li class="selected">Ana Sayfa Diğer
                        <div class="icerikTipButtonlar">
                          <a href="#" class="btn btn-info"><i class="icon-list-unordered"></i> Listele</a>
                          <a href="#" class="btn btn-success"><i class="icon-plus3"></i> Ekle</a>
                        </div>
                      </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>
            </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 panel-title" id="baslik2">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion-controls" href="#accordion-controls-group2">İç Site İçerik Tip</a>
      </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">trasdf
                <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>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>

0 个答案:

没有答案