过滤器引导按钮

我有引导按钮的列表，也是一个搜索框，我想实现的过滤器功能的列表（最好是在JavaScript）来过滤按钮的数量：过滤器引导按钮

的引导代码是在这里：

<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搜索实现。

来源

2016-07-27 Morpheus

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

基本上要每次在输入用户类型来过滤元件运行的功能。您正在隐藏与用户输入不匹配的所有按钮。

来源

2016-07-27 19:00:43 Josh

过滤器引导按钮

回答

相关问题