jQuery completamento automatico risulta qualcosa oltre le caselle di testo?

Question

Va bene, sono stato scherzi con questa roba di completamento automatico per 2 settimane, e sta cominciando a darmi un mal di testa! Ho ottenuto a fare quasi tutto ciò che mi serve, ma sto appeso su una questione. Ho due ingressi di testo completamento automatico che sono legati insieme. Il primo ingresso consente all'utente di selezionare una persona da una tabella del database MySQL. Poi, sulla base di tale selezione, il secondo ingresso consente all'utente di selezionare uno degli indirizzi della persona da una tabella di database indirizzi. Questa parte tutto funziona bene.

Il campo completamento automatico problematico interroga una tabella indirizzi e memorizza ogni risultato in uno slot di matrice come segue:

titolo | STREET_ADDRESS | città | stato | zip

Il guaio arriva quando semplicemente cercando di uscita dati dell'elemento selezionato alla innerHTML di un tag SPAN.

Ho usato l'opzione FORMATtutti per visualizzare solo il titolo nella lista di completamento automatico. Dopo aver selezionato la voce voglio che poi mostrare lo STREET_ADDRESS, città, stato e zip in un tag SPAN sotto la casella di input. Si sta facendo le informazioni, ma dal momento che la funzione FORMATtutti legge automaticamente attraverso ogni riga, viene visualizzato lo STREET_ADDRESS, città, stato e zip della ultima elemento della lista al posto di quello che è stato selezionato. Tuttavia, ciò che viene restituito al metodo di scrittura è il titolo della voce selezionata. E 'molto frustrante!

Qualcuno sa come posso ottenere questo problema risolto ???

Grazie in anticipo per qualsiasi aiuto!

Answer 1

sto supponendo che si sta utilizzando http://code.google.com/ p / jquery-completamento automatico / o una delle varianti. Quello che dovete fare è collegare un evento a onItemSelect. Nelle versioni più vecchie si otterrebbe l'elemento LI e una serie optional dei dati. Nella versione più recente (dopo la riscrittura), si ottiene il valore standard e la risposta di dati facoltativi. Se siete confusi, basta iniziare con questa impostazione (assumendo Firebug o fornitore othe di console.log):

...
onItemSelect = function(a, b) { console.log(a); console.log(b); }
...

Questo ti mostrerà la risposta della versione che si sta utilizzando. È possibile lavorare da lì.

Vorrei sapere se è possibile farlo funzionare. Se si esegue in problemi, scriverò un esempio più completo.

Answer 2

DEMO

Codice JS:

$(function() {
var houses = [
{
    title: "House 1",
    value: "House 1",
    street_address: "Address 1",
    city: "City 1",
    state:"State 1",
    zip:123456
},
{
    title: "House 2",
    value: "House 2",
    street_address: "Address 2",
    city: "City 2",
    state:"State 2",
    zip:456123    
}
];
$( "#house" ).autocomplete({
minLength: 0,
source: houses,
/*focus: function( event, ui ) {
$( "#project" ).val( ui.item.label);
return false;
},*/
select: function( event, ui ) {
    $('#house_address').html(ui.item.street_address+", "+ui.item.city+", "+ui.item.state+", "+ui.item.zip);
    return false;
}
})

});

HTML:

<div id="project-label">Select a house(type like "h" for a start):</div>
<input type="text" id="house">     
<br>
House complete address:<br>    
<span id="house_address"></span>