<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <!-- Nav tabs category --> <ul class="nav nav-tabs faq-cat-tabs"> <li class="active"><a href="#faq-cat-1" data-toggle="tab">Cadastro</a></li> <li><a href="#faq-cat-2" data-toggle="tab">Consulta</a></li> </ul> <!-- Tab panes --> <div class="tab-content faq-cat-content"> <div class="tab-pane active in fade" id="faq-cat-1"> <div class="panel-group" id="accordion-cat-1"> <div class="panel panel-default panel-faq"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion-cat-1" href="#faq-cat-1-sub-1"> <form id="cadastrofuncao" method="post" class="form" role="form"> <legend>Formulário de Cadastro</legend> <div class="row"><br><br> <div class="col-xs-6 col-md-5 form-group"> <input class="form-control" id="inputcodfuncao" name="codfuncao" placeholder="Código Função" type="text" required autofocus /> </div> <div class="col-xs-4 col-md-12 form-group"> <input class="form-control" id="inputdescricao" name="descricao" placeholder="Descrição" type="text" /> </div> </div> <br><br><br><br><br><br> <a class="btn btn-default btn-outline">Gravar</a> <a class="btn btn-default btn-outline">Limpar</a> </form> </a> </div> </div> </div> </div> <div class="tab-pane fade" id="faq-cat-2"> <div class="panel-group" id="accordion-cat-2"> <div class="panel panel-default panel-faq"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion-cat-2" href="#faq-cat-2-sub-1"> <!--inicio da div interna Destinatario --> <form id="consultafuncao" method="post" class="form" role="form"> <legend>Formulário de Consulta</legend> <!-- Multiple Radios (inline) --> <div class="container"> <div class="row"> <div class="col-md-5"> <div class="input-group"> <!-- USE TWITTER TYPEAHEAD JSON WITH API TO SEARCH --> <input class="form-control" id="system-search" name="q" placeholder="Search for" required> <span class="input-group-btn"> <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button> </span> </div> </div></div><div class="row"> <div class="col-md-6"> <table class="table table-list-search"> <thead> <tr> <th>Codigo</th> <th>Funcão</th> </tr> </thead> <tbody> <tr> <td>00001</td> <td>Diretor Geral</td> </tr> <tr> <td>00002</td> <td>Diretor Financeiro</td> </tr> <tr> <td>00003</td> <td>Diretor Comercial</td> </tr> <tr> <td>00004</td> <td>Tráfego</td> </tr> <tr> <td>00005</td> <td>Auxiliar Tráfego</td> </tr> <tr> <td>00006</td> <td>Analista de Sistema</td> </tr> </tbody> </table> </div> </div> </div> <!-- <div class="control-group"> <label class="control-label" for="button1id"></label> <div class="controls"> <button id="button1id" name="button1id" class="btn btn-default">Confirma</button> <button id="button2id" name="button2id" class="btn btn-default">Limpar</button> </div> </div> --> </form> </a> <!--fim da div interna Destinatario --> </div> </div> <!--fim da class=panel panel-default panel-faq --> </div><!--fim da div accordion-cat-2 --> </div> <!-- --> </div> </div> </div> </div> </div> </div>

body { margin-top: 2% }

$(document).ready(function() { var activeSystemClass = $('.list-group-item.active'); //something is entered in search form $('#system-search').keyup( function() { var that = this; // affect all table rows on in systems table var tableBody = $('.table-list-search tbody'); var tableRowsClass = $('.table-list-search tbody tr'); $('.search-sf').remove(); tableRowsClass.each( function(i, val) { //Lower text for case insensitive var rowText = $(val).text().toLowerCase(); var inputText = $(that).val().toLowerCase(); if(inputText != '') { $('.search-query-sf').remove(); tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "' + $(that).val() + '"</strong></td></tr>'); } else { $('.search-query-sf').remove(); } if( rowText.indexOf( inputText ) == -1 ) { //hide rows tableRowsClass.eq(i).hide(); } else { $('.search-sf').remove(); tableRowsClass.eq(i).show(); } }); //all tr elements are hidden if(tableRowsClass.children(':visible').length == 0) { tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>'); } }); });