mysql_php_autosuggest

Il Web 2.0 ha apportato alcune modifiche nell’utilizzo di alcuni componenti che ogni giorno utiliziamo all’interno di Web application o comuni Web site; una delle maggiori implementazioni, a mio parere molto comoda è la funzione di Autosuggest nei campi di ricerca di una Form. Se pensiamo al campo di ricerca di Google possiamo apprezzare e considerare ormai l’indispensabilità di questa utility.

A questo proposito, dopo aver cercato nella rete alcune soluzioni che sfruttassero la potenzialità di un backend dinamico, ho trovato l’ottima soluzione proposta da Tiziano Treccani e il suo jquery.hintbox. Il plugin sfrutta il Framework jQuery e può retrivare, dunque suggerire i dati sia leggendoli da un file .txt o da un file JSON.

A questo punto ho deciso di dinamizzare il processo di callback utilizzando il linguaggio dinamico PHP, come base dati un DB MySql e la trasformazione dinamica del file JSON tramite PHP.Il procedimento è molto semplice è può essere implementato in qualunque pagina dinamica che sfrutti una base dati proveniente da DB e sfrutti un linguaggio dinamico; a questo proposito le pagine che ho preparato sono composte da:

  • Una pagina contenente un  form di ricerca, nella quale importeremo il Framework jQuery e il plugin jquery.hintbox Il nome e ID del nostro campo di input sarà lo stesso che dichiariamo nell’istanza del plugin al fine di linkare la chiamata al componente.
  • Una pagina di callback chiamata metadata.php nella quale impostiamo la connessione al DB e settiamo la query alla nostra tabella specificando il campo dove estrarre i dati.

Nella pagina metadata.php, nel momento di creare l’output dei dati dovremmo produrre la sintassi esatta tipica di un file JSON; a questo proposito nel loop dei dati, contiamo i records tramite una variabile i e eliminiamo sull’ultimo dato la virgola al fine di produrre un listato JSON corretto.

Se pubblichiamo nel browser la pagina metadata.php vedremo la lista dei dati estratti dal DB; i stessi dati saranno dunque letti dal campo di ricerca e suggeriti all’interno di una lista dinamica creata dal plugin.

Nel pacchetto .ZIP che scaricherete ci sono tutti i files necessari al tutorial, compreso il file .sql per la tabella di esempio utilizzata.

Buon lavoro e visitate il Blog di Tiziano Treccani per conoscere le varie Features del sup jquery.hintbox plugin.

Scarica il pacchetto PHP jQuery Autosuggest dal sito Beat Fly.