[英]Jquery search not working properly in accordion?
Here if search text matches the text of <a> tag
I want to hide other unmatched items.在这里,如果搜索文本与<a> tag
的文本匹配,我想隐藏其他不匹配的项目。
Here what is happening is if the searched input does not match any thing then only the accordion disappears otherwise nothing happens.这里发生的情况是,如果搜索到的输入不匹配任何东西,那么只有手风琴消失,否则什么也不会发生。
I want to display only the accordion which matches the searched text and hide unmatched.How can I do it here?我只想显示与搜索文本匹配的手风琴并隐藏不匹配的内容。我该怎么做?
script脚本
jQuery("#query").keyup(function () {
var filter = jQuery(this).val();
jQuery("#accordion").each(function () {
if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
jQuery(this).hide();
} else {
jQuery(this).show()
}
});
});
html html
<input type="text" id="query" >
<div class="crollable">
<div id="accordion">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
</div>
<div id="collapse1" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
</div>
<div id="collapse2" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value2</div>
</div>
</div>
Your html
structure are missing some tags.您的html
结构缺少一些标签。 Then you can iterate through your [data-toggle]
element and if match found hide closest
card from that elements.然后您可以遍历您的[data-toggle]
元素,如果找到匹配项,则从该元素中隐藏closest
卡片。
Demo Code :演示代码:
jQuery("#query").keyup(function() { var filter = jQuery(this).val().toLowerCase(); //get text //loop through `a` tag jQuery("#accordion [data-toggle]").each(function() { if (jQuery(this).text().toLowerCase().trim().indexOf(filter) < 0) { jQuery(this).closest(".card").hide(); //hide closest card } else { jQuery(this).closest(".card").show() } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <input type="text" id="query"> <div class="crollable"> <div id="accordion"> <div class="card"> <div class="card-header"> <a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a> </div> <div id="collapse1" class="collapse" data-parent="#accordion"> <div class="card-body"> <div class="col-3">value</div> </div> </div> </div> <div class="card"> <div class="card-header"> <a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a> </div> <div id="collapse2" class="collapse" data-parent="#accordion"> <div class="card-body"> <div class="col-3">value2</div> </div> </div> </div> </div> </div>
This should be easy.这应该很容易。 its a little mistake that you did.这是你做的一个小错误。
jQuery("#query").keyup(function () { var filter = jQuery(this).val().toLowerCase(); // Search function return 0 when it dose not find anything. // and the Regexp should be using g instead of i so the problem with casesensetive should be solved. jQuery("#accordion.card-body.col-3").each(function () { var text = jQuery(this).text().toLowerCase(); if (text.indexOf(filter) == -1) { jQuery(this).hide(); } else { jQuery(this).show(); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="query" > <div class="crollable"> <div id="accordion"> <div class="card"> <div class="card-header"> <a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a> </div> <div id="collapse1" class="collapse" data-parent="#accordion"> <div class="card-body"> <div class="col-3">value</div> </div> <div class="card"> <div class="card-header"> <a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a> </div> <div id="collapse2" class="collapse" data-parent="#accordion"> <div class="card-body"> <div class="col-3">value2</div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.