【发布时间】：2018-05-13 10:04:33
【问题描述】：
我有一个充满bootstrap collapsible panels 的视图。面板内部是文档列表。我在页面顶部有一个搜索框供用户输入文档名称。
目前发生的情况
当用户输入文档名称并按 Enter 键时.. 如果找到匹配项.. 包含文档的面板不会展开，但如果我点击它，它会展开并显示文档匹配的...其余面板仍然可见，但无法打开，因为它们没有任何匹配项。
我想要发生的事情
我想要发生的是，如果找到匹配项，则隐藏没有匹配项的面板和文档。当单击清除搜索按钮以返回所有面板和文档时（如页面刷新但我不想刷新）。
这是我的代码
搜索框
<div id="Search-Section">
<div class="row">
<div class="col-md-12">
<input type="text" id="SearchLink" class="form-control link-search" placeholder="Document Name..." style="margin-left: 36%;"/>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="submit" value="Search" id="ButtonSearch" class="btn btn-default SearchButtons" style="float: right; margin-right: -2%;"/>
</div>
<div class="col-md-6">
<input type="reset" value="Clear Search" id="ButtonClearSearch" class="btn btn-default SearchButtons" style="margin-left: -69%;"/>
</div>
</div>
</div>
可折叠面板示例
<div class="row" style="margin-top: 2%;">
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Panel One</a>
</h3>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="~/Docs/testdoc1.pdf" target="_blank">Test Document 1</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Panel Two</a>
</h3>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="~/Docs/testdoc2.pdf" target="_blank">Test Document 2</a></li>
<li><a href="~/Docs/testdoc3.pdf" target="_blank">Test Document 3</a></li>
<li><a href="~/Docs/testdoc4.doc" target="_blank">Test Document 4</a></li>
<li><a href="~/Docs/testdoc5.doc" target="_blank">Test Document 5</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
所以当我搜索“测试文档 1”时，应该完全隐藏面板二，但是当我单击“清除搜索”按钮时，面板二应该与面板一一起返回（即使面板一个未被隐藏，因为它包含与搜索匹配的文档）。
jQuery
// When user wants to search for document
$("#SearchLink").keyup(function (event) {
if (event.keyCode == 13) {
var textboxValue = $("#SearchLink").val().toLowerCase();
alert(textboxValue);
$('.panel-body').each(function () {
var exist = false;
$(this).find('ul li').each(function () {
if ($(this).find('a').text().toLowerCase().indexOf(textboxValue) !== -1) {
$(this).show();
exist = true;
} else
$(this).hide();
});
if (exist === false) {
$(this).prev('.panel-title').hide();
$(this).hide();
} else {
$(this).prev('.panel-title').show();
}
});
}
});
// When user wants to clear search
$("#ButtonClearSearch").click(function () {
$("#SearchLink").val("");
$('.panel-body').each(function() {
$(this).prev('h4').show();
$(this).children().each(function() {
$('ul li').show();
$('a').show();
});
});
$('#SearchLink').blur(function() {
if ($.trim(this.value) == null) {
$(this).val($(this).attr('Document Search'));
}
});
});
【问题讨论】：
-
只是提示：您可以使用 console.log() 代替 alert() 并在“检查元素”浏览器工具的控制台选项卡中查看日志。工作速度更快。
-
我知道，但我只是想查看值.. 所以我使用 alert 来避免更多按钮点击进入控制台选项卡。
-
无论如何，您都必须单击按钮关闭警报，而控制台保持打开状态以进行下一次刷新。不过只是一个提示。
-
确实如此。我在控制台全时打开的情况下开发我的页面 - 实际上减少了点击次数......而且，您实际上可以在控制台中查看数组和对象的内容。
标签： javascript jquery twitter-bootstrap panels