Skip to main content
removeu 29 caracteres do conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128
$(".search-panel .dropdown-menu a").click(function(e){
   e.preventDefault();
   var filtro = this.dataset.f;
   $(".f").addClass("d-none");
   $("[name='"+filtro+"']""[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>
$(".search-panel .dropdown-menu a").click(function(e){
   e.preventDefault();
   var filtro = this.dataset.f;
   $(".f").addClass("d-none");
   $("[name='"+filtro+"']").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>
$(".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>
removeu 8 caracteres do conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128
$(".search-panel .dropdown-menu a").click(function(e){
   e.preventDefault();
   var filtro = this.dataset.f;
   $(".f").addClass("d-none");
   $("[name='"+filtro+"']").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"control name=""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>
$(".search-panel .dropdown-menu a").click(function(e){
   e.preventDefault();
   var filtro = this.dataset.f;
   $(".f").addClass("d-none");
   $("[name='"+filtro+"']").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" name="" 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>
$(".search-panel .dropdown-menu a").click(function(e){
   e.preventDefault();
   var filtro = this.dataset.f;
   $(".f").addClass("d-none");
   $("[name='"+filtro+"']").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>
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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();
   var filtro = this.dataset.f;
   $(".f").addClass("d-none");
   $("[name='"+filtro+"']").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" name="" 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'