Filter eine Liste der Bootstrap-Tasten

Question

ich eine Liste der Bootstrap-Tasten haben und auch ein Suchfeld, und ich möchte eine Filterfunktion (vorzugsweise in Javascript) implementieren, um die Anzahl der Tasten zu filtern:

Der Bootstrap-Code ist hier :

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> 

der Filter sollte wie folgt funktionieren: wenn AA eingegeben wird, werden nur die Tasten mit dem Text "aa" sollte sichtbar sein.

Der einzige Vorschlag, den ich bei der Online-Suche erhielt, war die Verwendung von list.js, aber ich fragte mich, ob es eine einfachere JavaScript-Suchimplementierung geben kann.

Answer 1

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

Die 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(); 
}); 

Grundsätzlich wollen Sie die Funktion jedes Mal der Benutzer in der Eingabe ausführen, um die Elemente zu filtern. Sie blenden alle Schaltflächen aus, die nicht mit der Benutzereingabe übereinstimmen.