1
I have a question with hide()
and show()
have a input that when activated, it must display the "result" class and when clicking outside the input it must hide the "result" class or until you click on the search results link.
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>
How could you make the div "result" appear when the input is selected, and stay hidden by clicking off input or until the link is clicked?
This is the way, but when clicking on the <li> link the event hides the class before executing the link.
– Kim Hanneman
is because no link is set in the
href
and because the fence has no action so it hides.– gleisin-dev
try to put a link there, when clicking it will be redirected automatically and the hidden class
– gleisin-dev
It closed earlier even with a defined url, only with delay $('. result'). Hide(1000);
– Kim Hanneman
Wonderful! but it would be a problem the use of delay, or not?
– gleisin-dev
He gets in the way a little bit because of the animation.
– Kim Hanneman
You can create a condition to hide only by clicking on a <a> tag or clicking outside of all content.
– gleisin-dev
used delay $('.result'). Hide(200); and attended the click without movement transition. Thank you.
– Kim Hanneman
Let’s go continue this discussion in chat.
– Kim Hanneman