Suche durch Akkordeon ein Tags über Sucheingabe

Question

Ich habe ein Suchfeld und darunter ein Akkordeon mit Links im Körper. Jetzt möchte ich die Sucheingabe verwenden, um nach einem <a> Gegenstand innerhalb des Akkordeons zu suchen. Es sollte grundsätzlich erweitert werden, wenn es gefunden wird und eine Hintergrundfarbe hat.

Nicht sicher, wie man die Elemente durchläuft, nehme ich an, mit jquery könnte besser sein als 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

Hier ist, wie ich es getan hätte:

$("#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