[JQUERY] Autocompletamento parola con dati presi dal database

Descrizione

Lo script mostra come realizzare una ricerca in tempo reale mentre l’utente digita caratteri in un campo di input. Durante la digitazione, si espanderà un menu di risultati che contengono la stringa, in modo da facilitare il completamento rapido da parte dell’utente.

I risultati saranno ricercati all’interno di un array di valori, che nell’esempio saranno recuperati in due modi possibili:

• in modo statico, da un array Javascript con valori predefiniti. L’esempio è richiamato dal file index.html.
• in modo dinamico, da una tabella del database di tipo MySql, recuperando i dati tramite funzioni del PHP. L’esempio è richiamato dal file index.php.

In entrambi i casi, è necessario importare i dovuti file JQuery e la libreria JQuery-UI (entrambi presenti nella cartella dello script).

Release

21 marzo 2012
Data di prima pubblicazione.

Download

Composizione dello script

Si compone di una cartella contenente i seguenti file:

• index.html: la pagina principale dell’esempio con dati statici. Questo file include le librerie JQuery e crea il codice Javascript con i valori statici. Inoltre, stampa a video il campo di input nel quale è possibile digitare la stringa.
• index.php: come il precedente, ma recupera i dati in modo dinamico dal database. I file dump.sql e config.inc.php sono necessari soltanto se si usa questo file come esempio.
• config.inc.php: il file con le variabili di configurazione per accedere al database.
• dump.sql: contiene il dump da importare in un database MySQL, che genera la tabella elenco contenente un elenco di colori.
• jquery.js: il file che importa le librerie di JQuery, versione 1.7.1, scaricato dal sito ufficiale.
• jquery-ui.min.js: il file che importa le librerie di JQuery-UI, versione 1.8.18, scaricato dal sito ufficiale.
• jquery-ui.css: il foglio di stile che adatta la grafica richiamata dal JQuery-UI.

Approfondimento

Vai all'articolo di approfondimento dello script