Desenfoque problemas en el cuadro de búsqueda desplegable en jQuery

Implementé un cuadro de búsqueda que actúa como filter. Cuando un usuario hace clic en el área de búsqueda, se muestra un cuadro desplegable que muestra todas las opciones posibles. Escribir en el cuadro de búsqueda filtra los resultados. Al hacer clic fuera de la caja, se ocultan los resultados.

Utiliza el siguiente heiarchy HTML / CSS

&ltdiv class="search"> &ltinput type="text" name="search" value="search" placeholder="search"/> &ltdiv class="results"> &ltdiv class="result"> Result 1 </div> &ltdiv class="result"> Result 2 </div> ... </div> </div> 

Uso jQuery para mostrar / ocultar el menu desplegable en los events de enfoque / desenfoque

 var searchBar = { init : function(){ $('input[name=search]').focus(searchBar.openSearch); $('input[name=search]').blur(searchBar.closeSearch); $('div.result').each(function(e){ $(this).click(draftboardDynamic.selectResult); }); }, openSearch : function(e){ $('div.results').show(); }, closeSearch : function(e){ $('div.results').hide(); }, selectResult : function(e){ console.log($(this)); }, } $(document).ready(searchBar.init); 

Esto funciona bastante bien y puedo abrir, cerrar y search (JS eliminado para mayor claridad) sin problema. El único problema con el que estoy teniendo problemas es seleccionar resultados. El evento desenfoque parece desencadenarse antes de los events result.click y nunca se llama al controller. Puedo corregir este problema eliminando el enlace borroso, sin embargo, no puedo encontrar la forma de cerrar el cuadro desplegable cuando la input pierde el foco.

¿Algunas ideas?

3 Solutions collect form web for “Desenfoque problemas en el cuadro de búsqueda desplegable en jQuery”

Esta es una .blur difícil porque el evento .blur siempre se activará antes del .click . Hay dos soluciones posibles, ninguna de las cuales es particularmente deseable:

  1. Desvincula el evento .blur al pasar el cursor sobre div.result . Vuelva a vincularlo en mouseout.
  2. En lugar de hacer esto con .blur , enlace un evento de clic al documento y verifique que el objective no sea uno de los componentes de búsqueda.

Utilice el evento "mousedown" en lugar de "hacer clic":

 $(".container") .on("blur focus", "input", function({type}) { $(this).next().toggle(type === "focusin"); }) .on("mousedown", "ul", function({target: {innerText}}) { $(this).prev().val(innerText); }); 
 $(".container") .on("blur focus", "input", function({type}) { $(this).next().toggle(type === "focusin"); }) .on("mousedown", "ul", function({target: {innerText}}) { $(this).prev().val(innerText); }); 
 .container { position: relative; display: inline-block; } input, ul { border: solid 1px black; } ul { list-style: none; position: absolute; left: 0; right: 0; z-index: -1; margin: -1px 0 0; padding: 0; } label, li { cursor: pointer; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="_input"><b>Select value:</b></label> <div class="container"> <input id="_input"> <ul style="display:none"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <a href="#_input">Picked a wrong value?</a> 

La vinculación y desvinculación del evento de desenfoque en el mouse sobre / mouse funciona. Para los interesados, he creado un violín para demostrar esto: https://jsfiddle.net/AdamKMorris/uoqvfy2L/

Mi ejemplo utiliza jquery básico y .bind / .unbind para alternar el cuadro de búsqueda:

 $("#searchButton").click(function() { $("#searchBar").slideToggle(); $("#searchText").focus(); }).mouseover(function() { $("#searchText").unbind('blur'); }).mouseout(function() { $("#searchText").bind('blur', function() { $("#searchBar").slideToggle("fast"); }); }); 
  • ¿Cuál es el reemploop del evento blur de jQuery en AngularJS?
  • Hacer desaparecer un menu de búsqueda cuando el campo de búsqueda pierde el foco, pero aún así permitir que el usuario click los enlaces
  • Cambiar los colors de borde de TinyMCE en foco y desenfoque
  • Dojo: dojo onblur events
  • Principiante javascript onblur validation no validating
  • Sincronice desenfoque y click events en JavaScript
  • ¿Detecta cuando un usuario se desenfoca en un cuadro de input usando jQuery?
  • ¿Cómo debo disparar el evento de desenfoque de JavaScript después de hacer clic en el evento que causa el desenfoque?
  • Obtener el object cliqueado que activó jquery blur () evento
  • window.onblur no funciona
  • Cómo desenfocar el elemento div?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.