アコーデオンを介して検索入力を介してタグを検索

Question

私は検索入力フィールドと本体のリンク付きアコーディオンの下にあります。今度は検索入力を使用してアコーディオン内の項目<a>を探したいと思います。それは基本的にそれが発見され、背景色を持つ展開する必要があります。

どのように項目をループするか分からないので、jqueryを使用する方がJSより優れていると思いますか？ここで

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-top:10px;"> 
 
     <h1>Settings </h1> 
 
     </div> 
 
    </div> 
 
    <div class="row" style="padding-top:5px;"> 
 
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
 
     <input class="input-sm form-control form-control-sm" type="search" placeholder="search for setting..." id="search_settings" style="font-size:12px;margin-top:5px;"> 
 
     <div class="panel-group" role="tablist" aria-multiselectable="true" id="accordion-1"> 
 
      <div class="panel panel-default card" style="margin-bottom:5px;margin-top:5px;"> 
 
      <div class="panel-heading card-header" role="tab"> 
 
       <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-1">Property </a></h4> 
 
      </div> 
 
      <div class="panel-collapse collapse item-1" role="tabpanel"> 
 
       <div class="panel-body"> 
 
       <span><small> Property related</small></span> 
 
       <a href="#set1" class="nav-link" data-toggle="pill">Link 1</a> 
 
       <a href="#set2" class="nav-link" data-toggle="pill">Link 2</a> 
 
       <a href="#set3" class="nav-link" data-toggle="pill">Link 3</a> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="panel panel-default card" style="margin-top:5px;margin-bottom:5px;"> 
 
      <div class="panel-heading card-header" role="tab" style="margin-top:0px;"> 
 
       <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-2">Location </a></h4> 
 
      </div> 
 
      <div class="panel-collapse collapse item-2" role="tabpanel"> 
 
       <div class="panel-body"> 
 
       <span>Property related</span> 
 
       <a href="#set4" class="nav-link" data-toggle="pill">Link 4</a> 
 
       <a href="#set5" class="nav-link" data-toggle="pill">Link 5</a> 
 
       <a href="#set6" class="nav-link" data-toggle="pill">Link 6</a> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="panel panel-default card" style="margin-top:5px;margin-bottom:5px;"> 
 
      <div class="panel-heading card-header" role="tab"> 
 
       <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-3">User </a></h4> 
 
      </div> 
 
      <div class="panel-collapse collapse item-3" role="tabpanel"> 
 
       <div class="panel-body"> 
 
       <span>Property related</span> 
 
       <a href="#set7" class="nav-link" data-toggle="pill">Link 7</a> 
 
       <a href="#set8" class="nav-link" data-toggle="pill">Link 8</a> 
 
       <a href="#set9" class="nav-link" data-toggle="pill">Link 9</a> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9"> 
 
     <div class="tab-content"> 
 
      <div id="set1" class="tab-pane active"> 
 
      <h5>Set 1</h5> 
 
      <p>This is content of Tab 1</p> 
 
      </div> 
 
      <div id="set2" class="tab-pane"> 
 
      <h5>Set 2</h5> 
 
      <p>This is content of Tab 2</p> 
 
      </div> 
 
      <div id="set3" class="tab-pane"> 
 
      <h5>Set 3</h5> 
 
      <p>This is content of Tab 3</p> 
 
      </div> 
 
      <div id="set4" class="tab-pane"> 
 
      <h5>Set 4</h5> 
 
      <p>This is content of Tab 4</p> 
 
      </div> 
 
      <div id="set5" class="tab-pane"> 
 
      <h5>Set 5</h5> 
 
      <p>This is content of Tab 5</p> 
 
      </div> 
 
      <div id="set6" class="tab-pane"> 
 
      <h5>Set 6</h5> 
 
      <p>This is content of Tab 6</p> 
 
      </div> 
 
      <div id="set7" class="tab-pane"> 
 
      <h5>Set 7</h5> 
 
      <p>This is content of Tab 7</p> 
 
      </div> 
 
      <div id="set8" class="tab-pane"> 
 
      <h5>Set 8</h5> 
 
      <p>This is content of Tab 8</p> 
 
      </div> 
 
      <div id="set9" class="tab-pane"> 
 
      <h5>Set 9</h5> 
 
      <p>This is content of Tab 9</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

私はそれを行っているだろうかです：

$("#search_settings").keyup(function() { 
    var searchText = $(this).val().trim().toLowerCase(); 
    $(".panel-group").find("a").each(function(i, elem) { 
    if ($(this).text().trim().toLowerCase() == searchText) { 
     $(this).closest(".panel-collapse.collapse").filter(":not(.in)").prev(".panel-heading").find("a[data-toggle='collapse']").click(); 
    } 
    }); 
}); 

Here is the JSFiddle demo