(+39) 339-2021161
mail@rodolforizzo.it

18 settembre 2018

Autocompletamento con jQuery

Pubblicato da Rodolfo Rizzo il 18 settembre 2018
in:

Autocompletamento di un campo dati con PHP, JSON e jQuery

Perchè implementare un autocompletamento? Progettando una qualsiasi applicazione web, si potrebbe avere la necessità di dover creare un campo in un form che mostra dei suggerimenti dopo aver digitato un paio di lettere e che i suggerimenti vengano presi dinamicamente da una tabella del database. Per farlo possiamo usare jQuery Autocomplete UI.

In questo breve tutorial vedremo come implementare questa utile caratteristica. Qui puoi trovare una demo di quello che si può ottenere. Tutto quello che dovremo fare sarà creare una tabella nel database e un paio di file.



Creazione della tabella nel DB

La prima cosa che ci serve per il nostro tutorial è una tabella con memorizzati al suo interno i nomi di alcune città. Per fare presto potete creare con phpMyAdmin una nuova tabella di nome city con due soli campi (id, nome) e usare questa query SQL per popolarla con i nomi di alcune città:

Fatto questo abbiamo la base su cui lavorare per ottenere l'autocompletamento.

Il file index.php

Ora che abbiamo creato e popolato la nostra tabella city nel database passiamo al file index.php, questo file contiene il nostro campo input dotato di autocompletamento, vediamolo:

Nota che al campo input viene assegnato un id "citta" e una class "ui-autocomplete-input". Oltre a questo possiamo notare che all'interno del tag head vengono inclusi alcuni files esterni che servono per il funzionamento dell'autocompletamento:

e sono rispettivamente i files jquery-3.3.1.min.js, jquery-ui.min.js e i files CSS  jquery-ui.min.css e style.css (style.css non è indispensabile per il corretto funzionamento ma serve per dare uno stile alla pagina di esempio).

inoltre, sempre all'interno del tag head si trova lo script che serve per attivare l'autocompletamento:

che in pratica dice di applicare l'autocompletamento nel campo input dove è presente l'id citta (#citta), poi indica il file cerca.php il quale, lo vedremo dopo, si occupa di produrre il file JSON che servirà per ricavare i suggerimenti e poi minLength imposta il numero di caratteri da digitare prima di mostrare i suggerimenti.

Il file cerca.php

Questo file non fa altro che prelevare i dati inseriti nel campo input ed usando term ricerca nel database i valori che hanno una corrispondenza
quindi crea un file JSON il quale contiene l'elenco dei valori trovati.

Ovviamente dovete modificare le prime righe del file e inserire i vostri dati relativi all'host name (che di solito è localhost), il vostro nome utente, la vostra password e il nome del database.

Qui potete scaricare i files dell'esempio, dopo di che non ti resta che estrarre il file demo.zip, modificare il file cerca.php inserendo i dati corretti per la connessione al database e ovviamente creare la tabella city con phpMyAdmin. 

Fatto questo puoi caricare la cartella demo nella document root del tuo sito e testare il funzionamento recandoti con il browser all'indirizzo www.tuosito.it/demo/

 


Ti potrebbe interessare

Ultimi post pubblicati

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

rodolforizzo.it - webmaster freelance

WEBMASTER FREELANCE

Rodolfo Rizzo

Considero il tuo progetto importante come se fosse il mio. I principali vantaggi nel rivolgersi ad un freelance è che spesso è possibile ottenere lo stesso standard di lavoro a prezzi inferiori. Potrai anche essere in grado di collaborare a stretto contatto e condividere le idee.
RICHIEDI UN PREVENTIVO
mail@rodolforizzo.it
heart linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram