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?