jQuery opción de autocompletar el mouse activa el evento de desenfoque

Question

Uso la jQuery UI .autocomplete(), que realmente me encanta. Tengo un problema importante que no puedo resolver.

Cuando escribo una carta, por ejemplo s, y stackoverflow aparece en el menú desplegable, y utilizar el ratón para seleccionar stackoverflow, a continuación, el cuadro de entrada pierde temporalmente el enfoque, que hace que el onblur evento para ser llamado.

Aunque técnicamente el cuadro de entrada es blur ed cuando hago clic, esto va en contra de la intuición de usabilidad. ¿Cómo puedo solucionar este comportamiento molesto?

Answer 1

puede intentar usar el evento de apertura y cierre de la autocompletar de jQuery UI para controlar el evento de desenfoque de su cuadro de texto. Cuando la función de autocompletar está abierta, se desactiva el evento de desenfoque y, cuando se cierra, se habilita de nuevo el evento de desenfoque. He configurado un ejemplo de trabajo en jsfiddle.net. Espero eso ayude.

var disable=false; 

$("#tags").autocomplete({ 
    source: availableTags, 
    open: function(event, ui) { disable=true }, 
    close: function(event, ui) { 
    disable=false; $(this).focus(); 
    } 
}).blur(function() { 
    if(!disable) { 
    alert('blur'); 
    } 
}); 

Answer 2

¿Qué tienes en tu evento blur? Es un poco raro, pero podrías hacer un setTimeout con un retraso relativamente corto para el controlador de tu desenfoque. Luego puede establecer una variable en el controlador de evento de enfoque de autocompletar y decirle a su manejador de desenfoque que no se dispare.

Answer 3

Si bien la respuesta de drzone88 anterior funciona muy bien, hay un caso extremo de que me encontré con que debe ser criado: cuando se busca y no tienen resultados mostrados, el evento de cierre no se conoce. Entonces su función de desenfoque nunca será llamada. Así que me conformé con establecer la bandera cuando el contenido de la respuesta está vacío.

Mi solución también utiliza jquery.data() por lo que no tiene que arrastrar una variable en torno a:

$(".selector").autocomplete({ 
    source: ["your values here"], 
    open: function(event, ui) { $(this).data("no-blur", true); }, 
    close: function(event, ui) { 
    $(this).data("no-blur", false); 
    }, 
    response: function(event, ui){ 
    if(ui.content.length == 0) //when search results are empty, close is not called 
     $(this).data("no-blur", false); 
    else 
     $(this).data("no-blur", true); //not sure open is called again either if we re-get results 
    } 
}).on("blur", function() { 
    if(!$(this).data("no-blur")) { 
    //do something 
    } 
}); 

Como resulta, sin embargo, debido al orden en el que se denominan eventos y qué De hecho necesitaba hacer algo (desenfocar algo cuando el usuario difumina el campo sin seleccionando una opción en la lista de sugerencias), terminé configurando mi indicador noblur en verdadero al comienzo de la función de selección, y de nuevo a falso en el final de la falta de definición, como así:

$(".selector").autocomplete({ 
    source: ["your values here"], 
    select: function(ui, event){ 
    $(this).data("no-blur", true); 
    //do select stuff 
    }, 

}).on("blur", function() { 
    if(!$(this).data("no-blur")) { 
    //do something 
    } 
    $(this).data("no-blur", false); 
}); 

¡Espero que esto ayude a alguien!