2009-05-26 33 views
21

Desidero implementare una funzione di completamento automatico con le immagini nel mio sito web.jQuery completamento automatico con immagini

Vorrei utilizzare il plugin di completamento automatico jQuery.

Ho dato un'occhiata al loro codice di esempio.

Qualcuno mi può spiegare che cosa significa il codice qui sotto a $ (document) .ready() evento:

$("#imageSearch").autocomplete("images.php", { 
    width: 320, 
    max: 4, 
    highlight: false, 
    scroll: true, 
    scrollHeight: 300, 
    formatItem: function(data, i, n, value) { 
    return "<img src='images/" + value + "'/> " + value.split(".")[0]; 
    }, 
    formatResult: function(data, value) { 
    return value.split(".")[0]; 
    } 
}); 

mia esigenza finale è quando si digita alcune lettere nella casella di testo, voglio le opzioni per vieni con un'immagine associata ad esso.

risposta

21

Utilizzare questo per riferimento: http://api.jqueryui.com/autocomplete/


$("#imageSearch").autocomplete("images.php", { 

Applicare pluging completamento automatico a tutti i campi #imageSearch. Primo parametro immagino sia la pagina che genera la risposta in base a ciò che viene inserito (images.php);

 width: 320, 

Larghezza della discesa

 max: 4, 

suggerimenti Massimo

 highlight: false, 

Evidenziare vero/falso

 scroll: true, 

Barra di scorrimento alias tipo discesa della lista o solo un lungo div sotto.

 scrollHeight: 300, 

Altezza del menu a discesa automatico.

 formatItem: function(data, i, n, value) { 
      return "<img src='images/" + value + "'/> " + value.split(".")[0]; 
     }, 

come formattare la risposta restituita dal images.php.

 formatResult: function(data, value) { 
      return value.split(".")[0]; 
     } 

Come restituire il valore, se l'utente seleziona una delle opzioni.

}); 

parentesi di chiusura: p

+0

Quando l'utente fa clic su una delle opzioni, voglio chiamare un'altra pagina dove dovrei ignorare? – Shyju

+0

Risposta tardiva, ma puoi trovare la risposta nella documentazione di cui sopra - http://api.jqueryui.com/autocomplete/#event-select –

4

Questo è circa il plugin per jQuery completamento automatico, non v'è alcuna opzione come FORMATtutti e formatValue nel reale jQuery UI completamento automatico.

Suggerisco alle persone di leggere questo http://www.learningjquery.com/2010/06/autocomplete-migration-guide che spiega come migrare dalla vecchia versione del plugin al widget UI ufficiale.

per farti Autocomplete lavorare con immagine nella lista suggerire si dovrebbe leggere questa discussione: http://forum.jquery.com/topic/using-html-in-autocomplete

Problemi correlati