Jump to content
ndias

filtro de busca num menu dropdown

Recommended Posts

To fazendo um filtro de busca num menu vertical e quero quando clicar abrir um input search para eu digitar alguma coisa. Acontece que quando eu clico ele abre beleza, mas ao colocar o cursor do mouse dentro da input, ele fecha o menu.

 

Alguém poderia me ajudar?

 

Segue o código:

 

HTML

                    <nav class="navbar navbar-default sidebar" role="navigation">
                        <div class="container-fluid">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                               <a class="navbar-brand" href="#">Busca</a>
                            </div>
                            <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
                                <ul class="nav navbar-nav">
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Qualquer Coisa <span class="caret"></span> </a>
                                        <ul class="dropdown-menu s11">
                                            <li style="padding: 0 10px;">
                                            <input type="search" class="form-control sh" placeholder="digite qualquer coisa" data-search="s11">
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </nav>

 

CSS

<style>
     nav.sidebar, .main{
  -webkit-transition: margin 200ms ease-out;
  -moz-transition: margin 200ms ease-out;
  -o-transition: margin 200ms ease-out;
  transition: margin 200ms ease-out;
 }
 .main{
  padding: 10px 10px 0 10px;
 }
 @media (min-width: 765px) {
  .main{
   position: absolute;
   width: calc(100% - 40px);
   margin-left: 40px;
   float: right;
  }
  nav.sidebar:hover + .main{
   margin-left: 200px;
  }
  nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
   margin-left: 0px;
  }
  nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
   text-align: center;
   width: 100%;
   margin-left: 0px;
  }
  nav.sidebar a{
   padding-right: 13px;
  }
  nav.sidebar .navbar-nav > li:first-child{
   border-top: 1px #e5e5e5 solid;
  }
  nav.sidebar .navbar-nav > li{
   border-bottom: 1px #e5e5e5 solid;
  }
  nav.sidebar .navbar-nav .open .dropdown-menu {
   position: static;
   float: none;
   width: auto;
   margin-top: 0;
   background-color: transparent;
   border: 0;
   -webkit-box-shadow: none;
   box-shadow: none;
  }
  nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
   padding: 0 0px 0 0px;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
   color: #777;
  }
  nav.sidebar{
   width: 200px;
   height: 100%;
   margin-left: -160px;
   float: left;
   margin-bottom: 0px;
  }
  nav.sidebar li {
   width: 100%;
  }
  nav.sidebar:hover{
   margin-left: 0px;
  }
  .forAnimate{
   opacity: 0;
  }
 }
 @media (min-width: 1330px) {
  .main{
   width: calc(100% - 200px);
   margin-left: 200px;
  }
  nav.sidebar{
   margin-left: 0px;
   float: left;
  }
  nav.sidebar .forAnimate{
   opacity: 1;
  }
 }
 nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
  color: #CCC;
  background-color: transparent;
 }
 nav:hover .forAnimate{
  opacity: 1;
 }
 section{
  padding-left: 15px;
 }
 ::-webkit-input-placeholder  { color:#29416b!important; }
 input:-moz-placeholder { color:#29416b!important; }
</style>
 
 
Javascript
<script type="text/javascript">
 $('input.sh').on('keyup', function(){
   
   var elementFilter = $(this).data('search');
  var dataFilter = $(this);
  var valorBusca = dataFilter.val();
    var contaLetras = valorBusca.length;
     if (contaLetras >= 1) {
      filterData(valorBusca, elementFilter);
     } else {
   $('.'+elementFilter+' li a').parent().show();
   $('.'+elementFilter+' .divider').show();
     }
  
  function filterData(data, elementFilter) {
    
   $('.'+elementFilter+' li a').each(function(iIndex, sElement) {
    $(sElement).parent().hide(); 
    
    $('.'+elementFilter+' .divider').eq(iIndex).hide();
    if (sElement.innerHTML.indexOf(data) !== -1) {
     var obj = $(sElement).parent();
      obj.prev().show();
      obj.next().show();
      obj.show();
     }
   });
 }
 
 function retiraAcentos(palavra) {
  var com_acento = 'áàãâäéèêëíìîïóòõôöúùûüçÁÀÃÂÄÉÈÊËÍÌÎÏÓÒÕÖÔÚÙÛÜÇ';
  var sem_acento = 'aaaaaeeeeiiiiooooouuuucAAAAAEEEEIIIIOOOOOUUUUC';
  var nova='';
  for(i=0;i<palavra.length;i++) {
   if (com_acento.search(palavra.substr(i,1))>=0) {
    nova+=sem_acento.substr(com_acento.search(palavra.substr(i,1)),1);
   }
   else {
    nova+=palavra.substr(i,1);
   }
  }
  return $.trim(nova).toLowerCase();
 }
   
 });
 </script>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Sapinn
      Quero que quando o usuario chegue em uma parte do menu site ele o menu fique fixo no topo da pagina. Como fazer isso???
    • By opl12
      Podem me ajudar?
      Preciso colocar um menu "DropDown" na "Nav Bar"... mas tô me quebrando hahahaha
      o que estou fazendo de errado?
      <!DOCTYPE html> <html lang="pt-br"> <head> <!-- Última versão CSS compilada e minificada --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Tema opcional --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Última versão JavaScript compilada e minificada --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>::: TESTE :::</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <!--<img width="80px" height="30" src="#" title="seu texto" vspace="10px"/>--> </div> <ul class="nav navbar-nav"> <li class="nav-item"><a class="nav-link" href="#" target="a_blank">HOME</a></li> <li class="nav-link"><a href="#" target="a_blank">LINK A</a></li> <li class="nav-link"><a href="#" target="a_blank">LINK B</a></li> <li class="nav-link"><a href="#">LINK C</a></li> <li><a href="#">LINK D</a></li> <li><a href="#">LINK E</a></li> <li><a href="#">LINK F</a></li> <li><a href="#" target="a_blank">LINK G</a></li> <div class="dropdown"> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> User</a></li> <li><a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true" <img title="Deslogar"/> </span>Sair</a></li> </ul> </div> </nav> </body> </html>  
    • By jcvlanova
      Galera, gostaria de saber se e possivel colocar no NavBar do Boostrap o icone do menu tipo sanduiche, de tal forma que o menu vertical ou horizontal somente fosse mostrado quando clicado no icone sem necessariamente expandir o height do Navbar? Desculpem a ignorancia. Mas os exemplos que vi são sempre usando a função collapse da class navbar collapse. Isso faz com que o menu (horizontal ou vertical), esteja sempre visivel e o botao só apareça quando voce diminui o tamanho da tela, que é quando o menu fica oculto. Quando isso acontece, o NavBar é expandido. Não é isso que quero. Quero o Navbar com altura fixa de 140 px sempre, com o botao tipo sanduiche a esquerda meu logo no centro e um campo de busca a direita. Ao clicar no botão os menus seriam mostrados normalmente. Consigo fazer isso com o css, sem usar o Bootstrap, mas nao é isso que quero. Alguem pode me ajudar ?
      Meu código está assim :
      <div class="navbar navbar-secondary navbar-dark"> <button class="navbar-toggler" data-toggle="collapse" data-target="#menu"> <span class="navbar-toggler-icon"></span> <a href="#" class="navbar-brand"><img src="/imagens/LogoJornal.png"> Aqui entra os itens de menu: <div id="menu class="collapse navbar-collapse"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="Home"> </li> <li class="nav-item active"> <a class="nav-link" href="Principal"> </li> ... </ul> <form class="form-inline"> <input type="''text" placeholder="Buscar" name="buscar" class="form-control"> <input type="submite" class="btn btn-outline"> </button>  
    • By gabybarross
      Amigos, preciso da ajuda de vocês. 
      Meu site vende um serviço e gostaria de saber como faço após a compra desse serviço que seja automaticamente incluído um perfil para o usuário. Isso porque gostaria de fazer um menu em que apenas quem comprou o serviço consiga visualiza-lo. 
      OBrigada gabriela
    • By Carlos Web Soluções Web
      Olá....boa tarde !!

      Crei um menu multi-level simples em CSS:
       
      MENU_MOLDE

      , gostaria agora que, para:

      @media screen and (max-width: 900px)

      o menu se torne responsável, com ul li a {float: none; text-align: left; width: 100%} e ativar o submenu ao clicá-lo e desativar ao clica-lo novamente!!

      Alguém poderia me ajudar ??
      Desde já muito obrigado !!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.