2011-10-11 19 views
25

Sto tentando di inviare un modulo quando un elemento è selezionato dal menu. Ho impostato la classe sul modulo di ricerca e sto usando la selezione dell'evento per esso che si trova qui: http://docs.jquery.com/UI/Autocomplete#event-selectjQuery Autocomplete: Event-select

Ora, quando si seleziona un elemento utilizzando la tastiera (SU e GIÙ), funziona. Ma se selezioni un oggetto usando il mouse, ti dà il valore che è stato precedentemente digitato.

Scegli questa Screenr: http://www.screenr.com/7T0s

Questo è quello che uso per la presentazione:

$("#searchform-input").autocomplete({ 
    select: function (a, b) { 
     $(".searchform1").submit() 
    } 
}); 

risposta

63

Questo perché il comportamento predefinito dell'evento select viene eseguito after your event handler is finished running (in modo che si può annullarla se lo desiderano).

Ciò significa che quando si fa clic su qualcosa, il modulo viene inviato prima che il widget abbia la possibilità di compilare correttamente lo input.

Si dovrebbe essere in grado di risolvere il problema facendo ciò che il widget normalmente fa per voi:

$("#searchform-input").autocomplete({ 
    select: function (a, b) { 
     $(this).val(b.item.value); 
     $(".searchform1").submit() 
    } 
}); 

Ora, ciò che si potrebbe chiedere è sì, ma perché funziona quando uso la tastiera?

Questo accade perché l'evento focus realtà popola l'elemento focalizzato nel input (guardare da vicino, vedrai la input popolati come ci si sposta su e giù per l'elenco). Quando si passa il mouse su un oggetto, viene chiamato l'evento focus, che inserisce lo input. Quando si seleziona qualcosa utilizzando la chiave enter, il valore corretto si trova nello input a causa dell'evento focus.

+2

+1 mi ha battuto ad esso ... provare [demo] (http://jsfiddle.net/Mottie/SmycH/) – Mottie

+0

Incredibile! Grazie mille signore – jQuerybeast

+0

@jQuerybeast: Nessun problema! –

-2

Hehe. Abbastanza difficile questo, ma incredibilmente semplice da risolvere. Basta ritardare la funzione 500 millisecondi, dopo l'evento selezionato. Funziona perfettamente. LAVORO FATTO!! :)

$("#searchform-input").autocomplete({ 
select: function (a, b) { 
    setTimeout(submit,500); 
}}); 
+2

Non contare sui tempi quando c'è una soluzione reale. –

Problemi correlati