JSFiddle - React, Tailwind, and code Playground

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

      <div class="prd" id="goal1" rel="320,420">

      </div>

    </div>
    <div role="tabpanel" class="tab-pane" id="baseball">
      <div class="prd" id="test" rel="320,420"> its test</div>
      <div class="prd" id="kaf" rel="894,82"> its kaf1</div>
      <div class="prd" id="roo" rel="65,74">its root1</div>
    </div>
    <div role="tabpanel" class="tab-pane" id="football">
     <div class="prd" id="test" rel="320"> its test2</div>
      <div class="prd" id="kaf1" rel="">kaf1</div>
    </div>
    <div role="tabpanel" class="tab-pane" id="volley_ball">
      <div class="prd" id="roo1"rel="7,8,6">roo1</div>
    </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('keyup', function() {
  var search = this.value;
  $('.nav.nav-pills li').hide().filter(function() {
    var $target = $($(this).find('a').attr('href'));
     var product=$target.find('.prd');
		 //var product_hidden=$target.find('[class=prd hide]');
		console.log(product);
		var c=0;
		
		 $.each( product, function(i,val)		                        		{
				$(val).removeClass('hide');
				console.log($(val).attr('rel').split(','));
				if(($(val).attr('id').toString().indexOf(search) != -1) ||($(val).attr('rel').split(',').toString().indexOf(search) != -1) )				{
					c=c+1;
				} 
				else{
					$(val).addClass('hide');
				}
		});
	
		//console.log(c);
		//console.log(search);
		
		if(search !==''){
			if(c==0){
			rtn=false;
			}else{
			rtn=true;
			}
		}else{
		rtn=true;
		//console.log(product);
		//$.each( product, function(i,val)		                        			{$(val).removeClass('hide');});
		}
	//	console.log(rtn);
    return rtn;
  }).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
})