如何解决使用javascript / jquery进行Bootrsrap卡实时搜索
我想为不使用数据库的引导卡创建实时搜索栏。 我能够完成实时搜索,但它保留了不可见搜索和过滤搜索之间的空间。这是我用来过滤卡片的脚本,
$(document).ready(function () {
$("#anythingSearch").on("keyup",function () {
var value = $(this).val().toLowerCase();
$("#myDIV .card").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
所有卡都编码为
<div id="myDIV">
<div class="row">
<div class="col-md-4">
<div class="card">...</div>
</div>
<div class="col-md-4">
<div class="card">...</div>
</div>
<div class="col-md-4">
<div class="card">...</div>
</div>
...
</div>
</div>
搜索之前:
搜索后:
请告诉我如何摆脱这些空白。
解决方法
$(document).ready(function () {
$("#anythingSearch").on("keyup",function () {
var value = $(this).val().toLowerCase();
$("#myDIV .card").filter(function () {
// change here to the parent as if you hide card only card will hide but col will still take the place
$(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
这是jsfiddle
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。