Il completamento automatico dell'interfaccia utente Jquery non consente più di selezionare le opzioni con il mouse

Question

Ho aggiornato di recente jquery ui e il relativo plug-in di completamento automatico, tuttavia nella versione più recente non mi consente di selezionare le opzioni con un clic del mouse e devo utilizzare le frecce su e giù. Come riattivare la selezione tramite clic del mouse?

Btw la nuova versione è 1.9.1, vecchia versione era 1.8.2

Answer 1

Nel mio caso la capacità di selezione del mouse è stato disattivato da una terza parte plugin jQuery obsoleto. Questo thread mi ha dato un'idea di cosa potrebbe essere sbagliato: http://forum.jquery.com/topic/autocomplete-click-to-select-item-not-working-in-1-9-1

Stavo usando una vecchia versione del plugin di validazione jquery (https://github.com/jzaefferer/jquery-validation). Ho disabilitato un plugin dopo l'altro per vedere quale stava causando il comportamento scorretto.

Answer 2

La versione più recente ha risolto questo problema.

Basta aggiornare all'ultima versione di jquery.validate.js da http://jqueryvalidation.org/. Per esempio scaricare Microsoft Ajax CDN (hotlinking benvenuto) http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js

Answer 3

Ho avuto lo stesso problema, anche utilizzando l'ultima versione di jQuery-ui disponibili al momento 1.11.4

Controllo del codice sorgente in file di jquery-ui.js ho trovato un pezzo come questo:

"click .ui-menu-item": function(event) { 
        var target = $(event.target); 
        if (!this.mouseHandled && target.not(".ui-state-disabled").length) { 
         this.select(event); 

         // Only set the mouseHandled flag if the event will bubble, see #9469. 
         if (!event.isPropagationStopped()) { 
          this.mouseHandled = true; 
         } 

il problema è la mouseHandled var set a true. Ma succede solo se la propagazione event non è stata interrotta.

Così come la soluzione che ho definito il mio completamento automatico in questo modo:

$('.autocomplete').autocomplete({ 
    source: ['value1','value2','value3','value4'], //my source 
    select: function(event, ui){ 
    event.stopPropagation(); //the select event will work next time you click 
    //your logic comes here ... 
    } 
}) 

Ha funzionato per me, spero che funziona per voi! =)