Bootstrap 使用jQuery搜索和过滤引导面板

bcs8qyzn 于 2023-10-14 发布在 Bootstrap

关注(0)|答案(2)|浏览(175)

我有很多（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());
});

twitter-bootstrap

来源：https://stackoverflow.com/questions/19247264/search-and-filter-bootstrap-panels-using-jquery

2条答案

按热度按时间

7gyucuyw1#

试试这个：

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

赞(0）回复(0）举报 2023-10-14

zengzsys2#

这个jQuery插件可能很有用：https://github.com/Mixtags/jquery-filterbox

$('#list').filterbox({
        container: '.list-group',
        child: '.list-group-item',
        childKey: '.list-group-item > .title'
    });

赞(0）回复(0）举报 2023-10-14

我来回答

Bootstrap 使用jQuery搜索和过滤引导面板

2条答案

相关问题

热门标签

最新问答