"Advanced Dropdown Search"
Bootstrap 3.3.0 Snippet by KlajdPaja

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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="well well-small"> <div class="page-header"> <h4><small><spring:message code="label.amministrazione.tecnico.titolo" /></small></h4> </div> <div class="well well-small"> <h2><small><spring:message code="label.amministrazione.tecnico.cerca" /></small></h2> <fieldset class="form-inline"> <form:form id="form_cerca_tecnico" name="form" method="post" modelAttribute="form" class="form-inline"> <input type="hidden" id="typeId" name="type" value="${tipoUtenteTecnico}" /> <div class="row-fluid"> <div class="control-group"> <label class="control-label" for="nomeId"><spring:message code="label.amministrazione.tecnico.nome" /></label> <div class="controls"> <input type="text" class="span8" id="nomeId" name="nome" /> </div> </div> </div> <div class="row-fluid"> <div class="control-group"> <label class="control-label" for="cognomeId"><spring:message code="label.amministrazione.tecnico.cognome"/></label> <div class="controls"> <input type="text" class="span8" id="cognomeId" name="cognome" /> </div> </div> </div> <div class="row-fluid"> <div class="control-group"> <label class="control-label" for="emailId"><spring:message code="label.amministrazione.tecnico.email" /></label> <div class="controls"> <input type="text" class="span8" id="emailId" name="email" /> </div> </div> </div> <div class="row-fluid"> <button class="pull-right btn btn-primary" id="aggiungi-tecnico" type="button" onClick="jQuery.addOrEditTecnico('');"> <spring:message code="label.amministrazione.tecnico.aggiungi" /> </button> </div> </form:form> </fieldset> <div class="row-fluid margintop10"> <div class="table-responsive"> <div class="text-info" id="total-nr-div" > <spring:message code="label.amministrazione.cercaTecnico.nrRisultati" /> </div> <table id="risultatiRicercaTable" class="table table-bordered" style="display: none;"> <thead> <tr> <th><spring:message code="label.amministrazione.cercaCandidato.cognome" /></th> <th><spring:message code="label.amministrazione.cercaCandidato.nome" /></th> <th><spring:message code="label.amministrazione.cercaCandidato.mail" /></th> <th></th> </tr> </thead> <tbody id="ricercaTecnico-results"> </tbody> </table> <div id="message"></div> </div> </div> <div class="row-fluid margintop10"> <div class="col-md-12"> <div class="text-center" id="paginationHolderTecnico"></div> </div> </div> </div> </div>
body { padding-top: 50px; } .dropdown.dropdown-lg .dropdown-menu { margin-top: -1px; padding: 6px 20px; } .input-group-btn .btn-group { display: flex !important; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .btn-group .form-horizontal .btn[type="submit"] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .form-horizontal .form-group { margin-left: 0; margin-right: 0; } .form-group .form-control:last-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } @media screen and (min-width: 768px) { #adv-search { width: 500px; margin: 0 auto; } .dropdown.dropdown-lg { position: static !important; } .dropdown.dropdown-lg .dropdown-menu { min-width: 500px; } }

Related: See More


Questions / Comments: