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 AlexandrePrezzi
      Preciso de uma ajuda....
       
      Tenho um código que gera um botao  dropdown e dentro dele gera um segundo nivel....
       
      <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } </style> </head> <body> <div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">HTML</a></li> <li><a tabindex="-1" href="#">CSS</a></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Segundo <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> </ul> </li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Primeiro <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">3nd level dropdown</a></li> <li><a tabindex="-1" href="#">4nd level dropdown</a></li> </ul> </li> </ul> </div> </div> <script> $(document).ready(function(){ $('.dropdown-submenu a.test').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); }); </script> </body> </html> o que acontece 
       
      Se eu clico em "Primeiro" abre um menu de subitens ao lado .... quando eu clico de novo ele fecha (ate ai ok)

      Mas supondo que eu clique em "Primeiro"  (abre ao lado) ... mas sem clicar pra fechar eu clico em "Segundo" (abre o submenu ao lado mas sem fechar o primeiro).
      e isso acaba deixando empilhado..
       
      Gostaria q quando tu clica em Segundo (caso o primeiro esteja expandido ele feche)  e vice-versa.
       
      Na imagem coloquei o q esta acontecendo.....

    • By Sapinn
      Tenha um menu hamburguer que abre a esquerda mas eu gostaria que ele abrisse a direita(O menu ficaria retrátil a direita ) para meu site se adequar a responsividade 
       
      codigo do menu que fica a esquerda 
       
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <title>Menu vertical reponsivo com html e css</title>
          <link rel="stylesheet" href="style.css">
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
          <style>
             *{
          margin:0;
          padding:0;
      }
      .menuMobileVertical a{
          text-decoration:none;
          color:white;
          display:block;
          padding:20px 5px;
      }
      .menuMobileVertical a:hover{
          background:rgba(176,224,230);
          color:black;
      }
      body{
          font-family:arial;
      }
      input[type="checkbox"]:checked ~ nav{
          transform: translateX(350px);
      }
      .menuMobileVertical ul{
          list-style:none;
          position:absolute;
          top:70px;
          width:100%;
          
      }
      .icone-menu{
          font-size:40px;
      }
      input[type="checkbox"]{
          display:none;
      }
      .menuMobileVertical{
          background:rgba(16,16,16,.5);
          width: 350px;
          height: 100vh;
          left:-350px;
          position: absolute;
          transition:all 0.5s;
          
      }
      label{
          padding:15px;
          position:absolute;
          z-index:1;
      }

          </style>
      </head>
      <body>
          <div class="menuMobile">
              <input type="checkbox" id="check">
              <label for="check"><i class="bi bi-list icone-menu"></i></label>
              <nav class="menuMobileVertical">
                  <ul>
                      <li><a href="">HOME</a></li>
                      <li><a href="">LOGIN</a></li>
                      <li><a href="">ALUNO</a></li>
                      <li><a href="">PROFESSOR</a></li>
                      <li><a href="">CONTATO</a></li>
          </ul>
          </nav>
      </div>
      </body>
      </html>
    • By Sapinn
      Fala galera blz? Então preciso de ajuda numa coisa aqui que não sei de jeito nenhum como resolver.
      Eu encontrei na W3School um menu tab vertical perfeito para minha página que é one page. Segui o link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs
      Mas estou me encontrando com um problema! Eu gostaria que esse menu permanece-se na mesma tag mesmo atualizando a página, por exemplo, se eu escolher a segunda opção do menu
      ela permanecerá ativada mesmo se eu atualizar a página. Na opção oferecida pela W3Shool, toda vez que a página é atualizada ele volta para a primeira tag que tem por padrão a primeira opção com um active. Não sei como resolver ou se tem uma solução para algo assim mas se alguém puder me ajudar eu agradeceria muito.
    • By Sapinn
      Fala galera blz? Então preciso de ajuda numa coisa aqui que não sei de jeito nenhum como resolver.
      Eu encontrei na W3School um menu tab vertical perfeito para minha página que é one page. Segui o link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs
      Mas estou me encontrando com um problema! Eu gostaria que esse menu permanece-se na mesma tag mesmo atualizando a página, por exemplo, se eu escolher a segunda opção do menu
      ela permanecerá ativada mesmo se eu atualizar a página. Na opção oferecida pela W3Shool, toda vez que a página é atualizada ele volta para a primeira tag que tem por padrão a primeira opção com um active. Não sei como resolver ou se tem uma solução para algo assim mas se alguém puder me ajudar eu agradeceria muito.
    • 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???
×

Important Information

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