javascript - 过滤 Bootstrap 按钮列表

Question

我有一个 Bootstrap 按钮列表和一个搜索框，我想实现一个过滤功能(最好在 JavaScript 中)来过滤按钮的数量:

Bootstrap 代码在这里:

https://jsfiddle.net/7zyrdnab/

    <div class="row">
    <div class="col-lg-2">
        <div class="panel">
        <input type="text" id="search" placeholder="Type to search">
        <br>
           <button type="button" class="btn btn-secondary">AA1009</button>
           <button type="button" class="btn btn-secondary">AA1010</button>
           <button type="button" class="btn btn-secondary">BA1098</button>
           <button type="button" class="btn btn-secondary">BB1890</button>
           <button type="button" class="btn btn-secondary">C89761</button>
           <button type="button" class="btn btn-secondary">CD1667</button>
           <button type="button" class="btn btn-secondary">GG7830</button>
           <button type="button" class="btn btn-secondary">GF65372</button>
           <button type="button" class="btn btn-secondary">BH6537</button>
           <button type="button" class="btn btn-secondary">HGB562</button>
           <button type="button" class="btn btn-secondary">LK9063</button>
           <button type="button" class="btn btn-secondary">CP9871</button>
           <button type="button" class="btn btn-secondary">IRON87</button>
           <button type="button" class="btn btn-secondary">ACT567</button>
           <button type="button" class="btn btn-secondary">MPO760</button>
           <button type="button" class="btn btn-secondary">GH5436</button>
           <button type="button" class="btn btn-secondary">NBH894</button>
           <button type="button" class="btn btn-secondary">GHFDF6</button>
           <button type="button" class="btn btn-secondary">US4536</button>
           <button type="button" class="btn btn-secondary">MO9854</button>
                     </div>
    </div>
</div>

过滤器应该像这样工作: 如果键入 AA，则只有带有文本“aa”的按钮应该可见。

我在网上搜索时得到的唯一建议是使用 list.js 但我想知道是否可以有一个更简单的 javascript 搜索实现。

Answer 1

https://jsfiddle.net/Shuaso/qhku76bu/

jquery:

var $button = $('.btn');

$('#search').keyup(function() {
    var re = new RegExp($(this).val(), "i"); // case-insensitive
    $button.show().filter(function() {
        return !re.test($(this).text());
    }).hide();   
});

基本上，您希望在每次用户键入输入以过滤元素时运行该函数。您正在隐藏所有与用户输入不匹配的按钮。