jQueryUI completamento automatico 'selezionare' non funziona su un clic del mouse, ma funziona su eventi chiave

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

Problema Sommario:

• AJAX funziona bene, ottengo tutte le voci correttamente nel menu di completamento automatico.
• Sono in grado di utilizzare le frecce su/giù per selezionare le voci di menu e una volta premuto Invio, selezionare l'evento viene generato correttamente e viene visualizzato il messaggio della console.
• Posso mettere a fuoco con successo le voci del menu ui e catturare il mouse sugli eventi per modificare il valore del testo di input.
• Non riesco a cliccare sulla voce di menu e sparare a un evento selezionato. quando clicco su una voce di menu, il messaggio della console non viene mai visualizzato.
• È come se l'evento click stia chiudendo il menu e chiudendolo anziché effettivamente attivare un evento selezionato. Qualche idea su come superare questo problema?
• Ho provato "appendTo: $ this" al divisore padre dell'input, quindi il clic del mouse funziona correttamente! - selezionare l'evento viene generato e il messaggio della console viene visualizzato correttamente. Ma non è quello che voglio dal momento che il menu è aggiunto all'interno del div padre che distorce l'interfaccia utente poiché probabilmente condividono lo stesso z-index. Anche se cambio lo z-index in un numero higehr in questo caso, non è stato di grande aiuto. Quindi sto cercando una soluzione in cui io non debba utilizzare appendTo se possibile.

Ho trovato varie altre domande nel ballpark, ma nessuna di queste sembra rispondere alla mia domanda.

jQuery Autocomplete - Left Mouse Click not firing Select event

jQuery UI autocomplete select event not working with mouse click

Grazie!

Answer 1

Ho lo stesso problema, ma nel mio caso è ancora più strano. l'evento select viene attivato ogni volta (quando si utilizza il mouse). per me anche l'evento select viene attivato correttamente se uso la mia tastiera.

sfortunatamente non è stato possibile riprodurre questo problema tramite jsfiddle. ma voglio ancora offrire il mio jsfiddle, forse è un buon punto di partenza per ulteriori analisi. ecco il mio codice jsFiddle: http://jsfiddle.net/knzNg/

L'unica differenza è che utilizzo un array locale come origine dati per i dati di completamento automatico. Immagino sia meglio cambiare il codice per usare un'origine dati remota.

Answer 2

Penso che potrebbe esserci un errore nel codice della casella combinata, in quanto non è stato possibile farlo funzionare. Prova a cambiare 'seleziona:' a 'selezionato:'.

Oppure si potrebbe provare a cambiare il codice nel codice dell'interfaccia utente JQuery reale, credo che di seguito è il colpevole in modo che una modifica di "selezionare" potrebbe funzionare. Dico potrebbe come non l'ho provato, semplicemente sono andato con quanto sopra.

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

Answer 3

ho testato in tutte le versioni di IE (comprensiva 9) e sempre finito con un ingresso di controllo vuoto dopo selezionato l'un elemento utilizzando il mouse. Ciò ha causato alcuni mal di testa. Sono persino andato al codice sorgente dell'interfaccia utente di jQuery per vedere cosa succede lì, ma non ho trovato nessun suggerimento. Possiamo farlo impostando un timeout, che accoda internamente un evento nel motore javascript di IE. Perché è garantito, che questo timeout-evento sarà in coda dopo l'evento di messa a fuoco (questo è già stato attivato prima da IE per 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

Ho lo stesso problema e dopo un sacco di googling, sembra che qualche altro plugin jquery è in conflitto con lo UI Core. Quindi il risultato è stato che il mio jquery validation plugin version 1.6 stava causando l'errore. Ho cambiato jquery validation to 1.9 e ora autocomplete è selezionabile tramite il mouse.

Answer 5

Modifica versione jQuery convalida plugin per 1,9 lavori per me

Answer 6

ho avuto questo problema oggi e ha scoperto che il campo che dovrebbe avere completamento automatico, ha avuto un evento di messa a fuoco che ha usato document.getElementById ('id'). Value = con ID errato, bloccando così gli script.

Answer 7

Mi trovavo di fronte a un problema simile. Volevo inviare il modulo quando l'utente ha fatto clic su un'opzione. Ma il modulo è stato inviato anche prima che fosse possibile impostare il valore dell'ingresso. Quindi sul lato server il controller ha ottenuto un valore nullo.

ho risolto utilizzando una versione modificata della risposta di William Niu su un altro post correlati - jQuery UI autocomplete select event not working with mouse click

Io fondamentalmente controllato per il tipo di evento. Se si tratta di un clic, imposto esplicitamente il valore della casella di input sul valore in ui.item.value. Vedere lo snippet in basso,

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

Il commento di @ atsurti è ben intenzionato, ma c'è un modo migliore.

Basta usare invece un timeout, consentendo a jQuery di impostare il modulo. Meno codice = codice migliore, 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

Se qualcun altro si trova ad affrontare questo :-) dopo alcuni anni 2 e mezzo ..

La soluzione al problema del PO è chiamare event.stopPropagation() all'interno del vostro select callback. Esempio:

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

appena di ritorno falso dal callback non ha funzionato