Autocomplete. Semplice e senza librerie aggiunte

[bako]

Salve
Cercavo una guida semplice per fare un autocomplete.
Ho visto che c sono mille librerire già fatte.
Ho provato ad usare quelle di scriptaculo e funzionano, ma ho difficoltà a gestire il mio layout dato che inserisco i div per il css.
ho provato a leggere il codice ed è incapibile.
c'è qualcosa di semplice che spiega tutto?
grazie

[gianiaz]

Originariamente inviato da bako
Salve
Cercavo una guida semplice per fare un autocomplete.
Ho visto che c sono mille librerire già fatte.
Ho provato ad usare quelle di scriptaculo e funzionano, ma ho difficoltà a gestire il mio layout dato che inserisco i div per il css.
ho provato a leggere il codice ed è incapibile.
c'è qualcosa di semplice che spiega tutto?
grazie

Guarda io in genere per queste cose uso un plugin di jquery.

In linea di massima il senso del funzionamento è che nella pagina hai un div nascosto, che viene visualizzato e riempito con i dati ricevuti via ajax.

In genere la chiamata via ajax viene eseguita dopo un tot di millisecondi dopo che hai premuto la prima lettera con la funzione setTimeOut, se premi la seconda prima che il tempo impostato sia arrivato a 0, fai un clearTimeOut e di nuovo SetTimeout, in questo modo eviti che mentre uno scrive l'inizio di una parola la richiesta parta immediatamente, ma solo quando l'utente si ferma.

Nel div che conterrà i risultati dovrai fare in modo che quando passi sopra l'elemento si evidenzi, e al click il campo del form venga aggiornato con il valore cliccato.

Il "problema" è che fare un autocomplete del genere richiede tanti piccoli accorgimenti (ad esempio se utilizzi le frecce per navigare tra i risultati, dovresti gestire che quando premi "su" alla prima voce debba tornare a selezionare l'ultima), oppure che se hai un campo select nelle immediate vicinanze del div con i risultati, anche se gli dai uno z-index alto avrai sempre il buco (in questi casi si mette un iframe tra il select e il div dei risultati), più probabilmente altri accorgimenti che io non conosco.

Non mi sento di consigliarti un framework javascript solo per questa cosa, ma in effetti in questi casi è molto comodo.

Nel caso particolare di jquery, dovrai includere 2 file javascript, jquery.js e il plugin per l'autocomplete.

Poi con 1 riga di javascript imposti l'autocomplete, applicandolo al campo che ha come id:capFatturazione, gli dici quale file php (o altro linguaggio lato server) interrogare per le risposte, il numero di caratteri, e la funzione javascript da chiamare quando un elemento viene selezionato (selectCap nel mio caso):

 $("#capFatturazione").autocomplete("ajax/searchcap.php", { minChars:1, matchSubset:1, matchContains:1, cacheLength:10, onItemSelect:selectCap, formatItem:formatItem, selectOnly:1 });

In genere non ho mai avuto problemi di layout, perchè semplicemente il plugin rileva la posizione del campo input e posizionerà sotto il campo il div che dovrà popolare con i risultati.
L'unico problema l'ho riscontrato in questo caso:
nella pagina ci sono elementi che compaiono e scompaiono modificando le proprietà di posizionamento e visualizzazione degli elementi (ad esempio fai scomparire un div tramite il click di un link), causando lo spostamento del campo input dopo che è stato dichiarato l'autocomplete (in questo caso il div verrà posizionato dove si trovava il campo prima degli spostamenti).

Spero di averti aiutato...