我在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>