Uma solução simples é adicionar a classe do Bootstrap .d-none
aos campos que irão aparecer escondidos inicialmente, e acrescentar uma classe qualquer (coloquei .f
) nos mesmos campos para você poder controlá-los.
Nos links do menu você coloca um dataset data-f
com respectivos valores dos name
dos campos. Assim, ao clicar em um link do menu, irá mostrar apenas o campo que possui o name
igual ao data-f
do link clicado, removendo a classe d-none
:
$(".search-panel .dropdown-menu a").click(function(e){
e.preventDefault();
$(".f").addClass("d-none");
$("[name='"+this.dataset.f+"']").removeClass("d-none");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filtrar por...</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="padding: 10px">
<li><a href="#" data-f="Nome"><i class="fas fa-caret-right"></i> Nome</a></li>
<li><a href="#" data-f="Data"><i class="fas fa-caret-right"></i> Mês e ano</a></li>
<li class="divider"></li>
<li><a href="#" data-f="Todos"><i class="fas fa-caret-right"></i> Todos</a></li>
</ul>
</div>
<input type="text" class="form-control d-none f" name="Nome" placeholder=" Filtrar por nome">
<input type="date" class="form-control d-none f" name="Data" placeholder=" Filtrar por data">
<input type="text" class="form-control d-none f" name="Todos" placeholder=" Filtro por todos os registros">
<input type="text" class="form-control f" placeholder=" Selecione o filtro ao lado">
<span class="input-group-btn">
<button class="btn btn-inverse" type="button"><i class="fas fa-search"></i></button>
</span>
</div>
</div>
</div>
Umas observações:
Em vez de usar:
$('.search-panel .dropdown-menu').find('a')
Você pode usar:
$('.search-panel .dropdown-menu a')
É mais curto e evita usar um método a mais, o .find()
.
Outra coisa é que não faz sentido usar o seletor:
'.search-panel span#search_concept'
Como um id
deve ser único, basta ir direto a ele:
'#search_concept'