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"); }); }); 
  • Entrada HTML onfocus & onblur?
  • ¿Cómo debo disparar el evento de desenfoque de JavaScript después de hacer clic en el evento que causa el desenfoque?
  • Novato de JavaScript: parece que onBlur de un elemento está "anulando" el clic de otro
  • jQuery $ (window) .blur vs native window.onblur
  • blur event.relatedTarget devuelve null
  • (Javascript) window.onblur y window.onfocus no funcionan en el dispositivo mobile Android
  • ng-blur no dispara evento en firefox con número de input
  • 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.