jQueryUI autocompletar 'seleccionar' no funciona en un clic del ratón, pero funciona en eventos clave

Question

JS/jQuery:

$this.find('input').autocomplete({ 
    source: "/autocomplete_tc_testcasename", 
    minLength: 2, 
    focus: function(e,ui){ 
     $(this).val(ui.item.label); 
     return false; 
    }, 
    select: function(e, ui) { 
     console.log("Selected: "+ui.item.value); 
    }  
}); 

CSS:

 .ui-autocomplete { 
      max-height: 200px; 
      overflow-y: auto; 
      padding: 5px; 
     } 
     .ui-menu { 
      list-style: none; 
      background-color: #FFFFEE; 
      width: 50%; 
      padding: 0px; 
      border-bottom: 1px solid #DDDDDD; 
      border-radius: 6px; 
      -webkit-box-shadow: 0 8px 6px -6px black; 
      -moz-box-shadow: 0 0px 0px -0px black; 
      box-shadow: 0px 2px 2px 0px #999999; 
     } 
     .ui-menu .ui-menu { 
     } 
     .ui-menu .ui-menu-item { 
      color: #990000; 
      font-family:"Verdana"; 
      font-size: 12px; 
      border-top: 3px solid #DDDDDD; 
      background-color: #FFFFFF; 
      padding: 10px; 
     } 

Resumen del problema:

• AJAX funciona bien, obtengo todas las entradas correctamente en el menú de autocompletar.
• Puedo usar las flechas de las teclas arriba/abajo para seleccionar las opciones del menú y una vez que presiono regresar, seleccionar evento se dispara correctamente y se muestra el mensaje de la consola.
• Me puedo enfocar en ui-menu-items con éxito y capturar el mouse sobre eventos para cambiar el valor del texto de entrada.
• Parece que no puedo hacer clic en el elemento del menú y activar un evento seleccionado. es decir, cuando hago clic en un elemento del menú, el mensaje de la consola nunca se muestra.
• Es como si el evento click estuviera descartando el menú y cerrándolo en lugar de disparar un evento seleccionado. ¿Alguna idea sobre cómo superar este problema?
• Probé "appendTo: $ this" en lugar de la div principal de entrada, y luego el clic del mouse funciona bien! - seleccionar evento se dispara y el mensaje de la consola se muestra con éxito. Pero eso no es lo que quiero ya que el menú se agrega dentro del div principal que distorsiona la UI ya que probablemente comparten el mismo índice z. Incluso si cambio el índice Z a un número Higehr en este caso, no fue de mucha ayuda. Así que estoy buscando una solución donde no 'tenga' que usar appendTo si es posible.

Encontré varias otras preguntas en el estadio de béisbol, pero ninguna de estas parece resolver mi pregunta.

jQuery Autocomplete - Left Mouse Click not firing Select event

jQuery UI autocomplete select event not working with mouse click

Gracias!

Answer 1

Tengo el mismo problema, pero en mi caso es aún más extraño. el evento select se activa cada dos veces (cuando se usa el mouse). para mí, el evento de selección también se activa muy bien en caso de que use mi teclado.

lamentablemente no pude reproducir este problema a través de jsfiddle. pero aún quiero ofrecer mi jsfiddle, tal vez sea un buen punto de partida para un análisis posterior. aquí está mi código jsFiddle: http://jsfiddle.net/knzNg/

La única diferencia es que utilizo una matriz local como origen de datos para los datos de autocompletar. Supongo que es mejor cambiar el código para usar un origen de datos remoto.

Answer 2

Creo que puede haber un error en el código del cuadro combinado, ya que tampoco pude hacer que esto funcione. Intente cambiar 'seleccionar:' a 'seleccionado:'.

O podría intentar cambiar el código en el código de IU de JQuery real, creo que a continuación es el culpable, por lo que un cambio en 'seleccionar' podría funcionar. Digo que, como no lo he intentado, simplemente fui con lo anterior.

select: function(event) { 
    this._trigger("selected", event, { item: this.active }); 
} 

Answer 3

he comprobado en todas las versiones de IE (inlcuyendo 9) y siempre terminó con una entrada de control de vacío después de que he seleccionado el un elemento con el ratón. Esto causó algunos dolores de cabeza. Incluso fui al código fuente de jQuery UI para ver qué pasa allí, pero tampoco encontré ninguna pista. Podemos hacer esto estableciendo un tiempo de espera, que internamente pone en cola un evento en el motor javascript de IE. Debido a que se garantiza, que este tiempo de espera del evento se pondrá en cola después de que el evento de foco (esto ya ha sido activado antes por el IE en sí)

select: function (event, ui) { 
    var label = ui.item.label; 
    var value = ui.item.value; 
    $this = $(this); 
    setTimeout(function() { 
     $('#txtBoxRole').val(value); 
    }, 1); 
}, 

Answer 4

tengo el mismo problema y después de un montón de google, parece que algún otro plugin jquery está en conflicto con el UI Core. El resultado fue que mi jquery validation plugin version 1.6 estaba causando el error. He cambiado jquery validation to 1.9 y ahora autocomplete se puede seleccionar con el mouse.

Answer 5

Cambio de versión de jQuery plugin para la validación 1.9 funciona para mí

Answer 6

tuve este problema hoy en día y se encontró que el campo que debe tener autocompletar, tenía un evento de foco, que utiliza document.getElementById ('id'). Value = con una identificación incorrecta, deteniendo así las secuencias de comandos.

Answer 7

Me enfrentaba a un problema similar. Quise enviar el formulario cuando el usuario hizo clic en una opción. Pero el formulario se envió incluso antes de que se pudiera establecer el valor de la entrada. Por lo tanto, en el lado del servidor, el controlador obtuvo un valor nulo.

Lo resuelto utilizando una versión modificada de la respuesta de William Niu en otro post relacionado - jQuery UI autocomplete select event not working with mouse click

básicamente he comprobado para el tipo de evento. Si fue un clic, establecí explícitamente el valor del cuadro de entrada al valor en ui.item.value. Vea el fragmento a continuación,

jQuery("#autoDropDown").autocomplete({ 
    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ], minLength: 0, delay:0, 
    select: function(event, ui) { 
     var origEvent = event; 
     while (origEvent.originalEvent !== undefined){ 
      origEvent = origEvent.originalEvent; 
     } 
     //console.info('Event type = ' + origEvent.type); 
     //console.info('ui.item.value = ' + ui.item.value); 
     if (origEvent.type == 'click'){ 
      document.getElementById('autoDropDown').value = ui.item.value; 
      document.getElementById('myForm').submit(); 
     } else { 
      document.getElementById('myForm').submit();  
     } 

    } 
    }); 

Answer 8

El comentario de @ atsurti es bien intencionado, pero hay una manera mejor.

Simplemente use un tiempo de espera en su lugar, lo que le permite a jQuery configurar el formulario. Menos código = mejor código, ¿sí? :)

jQuery("#autoDropDown").autocomplete({ 
    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ], minLength: 0, delay:0, 
    select: function(event, ui) { 
    window.setTimeout(function(){ 
     document.getElementById('myForm').submit(); 
    }, 1); 
    } 
}); 

Answer 9

Si nadie más se enfrenta a este :-) después de algunos años 2 y medio ..

La solución al problema de la OP es llamar event.stopPropagation() dentro de su select de devolución de llamada. Ejemplo:

$input.autocomplete({ 
    // ... options 
    select: function(event, ui) { 
     // ... handlers 
     e.stopPropagation(); 
    } 
}); 

que acaban de volver falsa de la devolución de llamada no funcionó