使用 jQuery 搜索和过滤引导面板
Search and Filter Bootstrap Panels using jQuery
我有很多(30+(的Bootstrap面板,如下所示(每个面板都有不同的标题和内容(:
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
Content
</div>
<div class="panel-footer">
Footer
</div>
</div>
我有一个搜索输入
<input type="text" id="filter" placeholder="Filter Algorithms">
当有人在过滤器框中输入时,我想做什么,它会搜索面板的标题并根据需要过滤它们。我以前见过这样做,但我不太确定从哪里开始。这是我到目前为止的代码:
$('#filter').keyup(function(){
$('body').find('.panel-title').find($('#filter').val());
});
试试这个:
var $panels = $('.panel');
$('#filter').on('keyup', function() {
var val = this.value.toLowerCase();
$panels.show().filter(function() {
var panelTitleText = $(this).find('.panel-title').text().toLowerCase();
return panelTitleText.indexOf(val) < 0;
}).hide();
});
引用
-
jQuery.filter()
: http://api.jquery.com/filter
这个jquery插件可能很有用:http://labs.easyblog.it/jquery-filterbox/
$('#list').filterbox({
container: '.list-group',
child: '.list-group-item',
childKey: '.list-group-item > .title'
});
相关文章:
- 使用jquery grep过滤具有值数组的json对象
- 如何使用javascript、jquery或其他javascript框架过滤数据
- 使用jquery过滤逗号分隔的span文本
- jquery对标记类型和id进行过滤
- jQuery只过滤可见元素
- 停止 jQuery 自动完成以过滤/搜索结果并填充整个源数组数据
- 如何在BlueImp jQuery下载程序中过滤要下载的文件
- 在 Android WebView 中过滤 DOM 元素,而无需 jQuery
- 多个复选框过滤,JavaScript和jQuery
- 使用jQuery过滤两种输入类型
- 使用jquery从json过滤搜索
- jQuery Mobile-过滤复选框的列表视图会导致出现无样式的复选框
- 如何动态过滤jQuery移动选择表单
- 过滤jQuery数据表的负整数
- 任何过滤jquery数据的选项,比如linq中的. Any()
- 使用filter()基于父元素过滤jquery
- 使用过滤jquery隐藏表行
- 过滤jQuery可排序的项目
- 过滤jquery输入中的名称
- 过滤JQuery列表与URL