JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<div class="container">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search" id="search">
    <span class="input-group-addon">
   <span class="glyphicon glyphicon-search"></span>
    </span>
  </div>
  <!-- Nav tabs -->
  <ul class="nav nav-pills" role="tablist">
    <li role="presentation" class="active"><a href="#soccer" role="tab" data-toggle="tab">soccer</a></li>
    <li role="presentation"><a href="#baseball" role="tab" data-toggle="tab">baseball</a></li>
    <li role="presentation"><a href="#football" role="tab" data-toggle="tab">football</a></li>
    <li role="presentation"><a href="#volley_ball" role="tab" data-toggle="tab">volley ball</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="soccer">soccer</div>
    <div role="tabpanel" class="tab-pane" id="baseball">baseball</div>
    <div role="tabpanel" class="tab-pane" id="football">football</div>
    <div role="tabpanel" class="tab-pane" id="volley_ball">volley ball</div>
  </div>

</div>

CSS

.input-group {
  margin-bottom: 15px;
}

.tab-pane {
  padding: 8px 8px 8px 8px;
  border-bottom: 1px solid lightgrey;
  border-left: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
  border-top: 1px dotted lightgrey;
  min-height:200px;
}

JavaScript

$('#search').on('input', function() {
  var search = this.value;
  $('.nav.nav-pills li').hide().filter(function() {
    //get target from tabs anchor and create jQuery Object
    var $target = $($(this).find('a').attr('href'));
    //Return true if the text contains the search word
    return ($target.text().indexOf(search) != -1);
  }).show().eq(0).find('a').click();
  //get 1st item (index of 0) and click the anchor to set it to active and activate
  //the associated tab-pane
})