How to hide class when clicking outside an input

Asked

Viewed 68 times

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?

javascript input

2 answers

2


You may be using jQuery and its events focusin and 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>

  • This is the way, but when clicking on the <li> link the event hides the class before executing the link.

  • 1

    is because no link is set in the href and because the fence has no action so it hides.

  • try to put a link there, when clicking it will be redirected automatically and the hidden class

  • It closed earlier even with a defined url, only with delay $('. result'). Hide(1000);

  • Wonderful! but it would be a problem the use of delay, or not?

  • He gets in the way a little bit because of the animation.

  • 1

    You can create a condition to hide only by clicking on a <a> tag or clicking outside of all content.

  • 1

    used delay $('.result'). Hide(200); and attended the click without movement transition. Thank you.

  • Let’s go continue this discussion in chat.

Show 4 more comments

1

You can also make this show or hide from the class resultado on the basis of <input> with pure Javascript only. For this you need to use events focusout, focusin and manipulate property display of the same:

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);

Example in your code:

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>

Browser other questions tagged javascript input

You are not signed in. Login or sign up in order to post.