Question

我有一个搜索输入字段，并且在手风琴下方有正文中的链接。现在我想使用搜索输入在手风琴中查找<a>项目。它应该基本上在找到并具有背景颜色时展开。

不确定如何遍历项目，我假设使用jquery可能比JS更好？

＆＃13;

<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>

＆＃13;

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

通过搜索输入搜索Accordion标签

1 个答案: