2

Tenho uma dúvida com hide() e show() tenho um input que ao ser ativado, deve exibir a classe "resultado" e ao clicar fora do input deve ocultar a classe "resultado" ou até que clique no link dos resultados da pesquisa.

function menuFiltro() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("pesquisa-int");
    filter = input.value.toUpperCase();                
    var p = document.getElementById('lista');
    var filhos = p.childNodes;
    for( i = filhos.length - 1; i >= 0; i-- ) {
        if( filhos[i].tagName == 'LI' ) {
            p.removeChild( filhos[i] );
        }
    }
    for (let index = 0; index < document.getElementsByClassName("grupo-menu").length; index++) {        
        ul =  document.getElementsByClassName("grupo-menu")[index];            
        ul.getElementsByClassName("grupo-menu")[index];
        li = ul.getElementsByTagName("li");            
        for (let i = 0; i < li.length; i++) {
            const element = li[i];
            a = element.getElementsByTagName("a")[0];
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                var newLi = document.createElement('li');
                newLi.innerHTML = li[i].innerHTML;
                p.appendChild(newLi);
            }

        }           
    }       
  }
<div class="search-bar">
  <input class="form-control" type="text" id="pesquisa-int" onkeyup="menuFiltro()" placeholder="Pesquisar" title="Pesquisa" autocomplete="off">
   <div class="resultado">
     <ul id="lista">
       <li><a href="#">Resultado 1</a></li>
       <li><a href="#">Resultado 2</a></li>
       <li><a href="#">Resultado 3</a></li>
     </ul>
   </div>
</div>

Como poderia fazer para que a div "resultado" seja exibida quando o input estiver selecionado, e fique oculta ao clicar fora input ou até que o link seja clicado?

2 Respostas 2

2

Você pode está utilizando jQuery e seus eventos focusin e focusout

$(function() {
  $('#pesquisa-int').focusin(function() {
    $('.resultado').show(); // exibe o conteúdo da div após o input está em foco.
  });
  $('#pesquisa-int').focusout(function() {
    $('.resultado').hide(200); // oculta o conteúdo da div após o input sair do foco.
  });
});

function menuFiltro() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("pesquisa-int");
    filter = input.value.toUpperCase();                
    var p = document.getElementById('lista');
    var filhos = p.childNodes;
    for( i = filhos.length - 1; i >= 0; i-- ) {
        if( filhos[i].tagName == 'LI' ) {
            p.removeChild( filhos[i] );
        }
    }
    for (let index = 0; index < document.getElementsByClassName("grupo-menu").length; index++) {        
        ul =  document.getElementsByClassName("grupo-menu")[index];            
        ul.getElementsByClassName("grupo-menu")[index];
        li = ul.getElementsByTagName("li");            
        for (let i = 0; i < li.length; i++) {
            const element = li[i];
            a = element.getElementsByTagName("a")[0];
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                var newLi = document.createElement('li');
                newLi.innerHTML = li[i].innerHTML;
                p.appendChild(newLi);
            }
            
        }           
    }       
  }
.resultado {
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-bar">
  <input class="form-control" type="text" id="pesquisa-int" onkeyup="menuFiltro()" placeholder="Pesquisar" title="Pesquisa" autocomplete="off">
   <div class="resultado">
     <ul id="lista">
       <li><a href="#">Resultado 1</a></li>
       <li><a href="#">Resultado 2</a></li>
       <li><a href="#">Resultado 3</a></li>
     </ul>
   </div>
</div>

9
  • É esse o caminho, porém ao clicar no link do <li> o evento oculta a classe antes de executar o link. Commented 6/07/2021 às 14:48
  • 1
    é porque não está definido nenhum link no href e por a cerquilha não ter nenhuma ação por isso ela oculta.
    – gleidson
    Commented 6/07/2021 às 14:52
  • tente colocar um link ai, ao clicar nele será redirecionado automaticamente e a classe ocultada
    – gleidson
    Commented 6/07/2021 às 14:52
  • 1
    Da pra criar uma condição para ocultar somente se clicar em uma tag <a> ou clicar fora de todo conteúdo.
    – gleidson
    Commented 6/07/2021 às 15:02
  • 1
    utilizei delay $('.resultado').hide(200); e atendeu ao clique sem transição de movimento. Obrigado. Commented 6/07/2021 às 15:19
2

Também dá para fazer esse mostrar ou esconder da classe resultado com base no focus do <input> apenas com JavaScript puro. Para tal precisa de utilizar os eventos focusout, focusin e manipular a propriedade display do mesmo:

const inputPesquisa = document.getElementById("pesquisa-int");
const classeResultado = document.querySelector(".resultado");
const esconderResultado = () => classeResultado.style.display = "none";
const mostrarResultado = () => classeResultado.style.display = "block";
inputPesquisa.addEventListener("focusout", mostrarResultado);
inputPesquisa.addEventListener("focusin", esconderResultado);

Exemplo no seu código:

const inputPesquisa = document.getElementById("pesquisa-int");
const classeResultado = document.querySelector(".resultado");
const esconderResultado = () => classeResultado.style.display = "none";
const mostrarResultado = () => classeResultado.style.display = "block";
inputPesquisa.addEventListener("focusout", mostrarResultado);
inputPesquisa.addEventListener("focusin", esconderResultado);

function menuFiltro() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("pesquisa-int");
    filter = input.value.toUpperCase();                
    var p = document.getElementById('lista');
    var filhos = p.childNodes;
    for( i = filhos.length - 1; i >= 0; i-- ) {
        if( filhos[i].tagName == 'LI' ) {
            p.removeChild( filhos[i] );
        }
    }
    for (let index = 0; index < document.getElementsByClassName("grupo-menu").length; index++) {        
        ul =  document.getElementsByClassName("grupo-menu")[index];            
        ul.getElementsByClassName("grupo-menu")[index];
        li = ul.getElementsByTagName("li");            
        for (let i = 0; i < li.length; i++) {
            const element = li[i];
            a = element.getElementsByTagName("a")[0];
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                var newLi = document.createElement('li');
                newLi.innerHTML = li[i].innerHTML;
                p.appendChild(newLi);
            }

        }           
    }       
  }
<div class="search-bar">
  <input class="form-control" type="text" id="pesquisa-int" onkeyup="menuFiltro()" placeholder="Pesquisar" title="Pesquisa" autocomplete="off">
   <div class="resultado">
     <ul id="lista">
       <li><a href="#">Resultado 1</a></li>
       <li><a href="#">Resultado 2</a></li>
       <li><a href="#">Resultado 3</a></li>
     </ul>
   </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .