JQuery – Autocompletamento di una parola in un campo form con dati presi dal database

Se all’utente presentate un campo di input libero, per esempio per ricercare una qualsiasi parola da trovare nel sito, può essere comodo e utile dargli la possibilità di visualizzare in tempo reale i possibili risultati di ricerca. Questi appariranno in un elenco simile al menu a tendina e cambieranno con il digitare di una nuova lettera da parte dell’utente.

JQuery ci mette a disposizione una funzione apposita.
Nell’articolo vedremo innanzitutto un esempio di base, in puro html e javascript, con una serie di parole chiave predefinite tra le quali ricercare. Subito dopo daremo un’occhiata a come costruire una chiamata alle tabelle del database, in modo da ricercare le parole nei campi voluti. L’interfaccia grafica è personalizzabile semplicemente modificando le classi del foglio di stile.
In fondo all’articolo trovate i link di riferimento al sito originale, da cui potete scaricare lo script e visualizzare tutte le opzioni disponibili.

Una nota: lo script ha bisogno del caricamento dei dati all’apertura della pagina. Questo significa che se estraete un grande quantitativo di dati dal database, potreste trovarvi con una pagina pesante e un sito rallentato. Da usare con cautela.

Download script

Pagina diretta alla scheda e al download del codice

Le inclusioni e il codice di base

Per funzionare, il codice ha bisogno di tre file da includere, che trovate già compresi nello script da scaricare:
– jquery.js: richiama le librerie base di JQuery
– jquery-ui.min.js: inclusioni delle funzioni per l’autocompletamento
– jquery-ui.css: formattazione del menu a tendina che appare mentre trova i risultati in tempo reale

Il codice di questi tre file sono disponibili online ai seguenti indirizzi e possono essere inclusi altrimenti in questo modo:

1
2
3

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Io consiglio comunque di scaricarli e di averli sempre in locale, perché in caso di (raro) malfunzionamento online o di dismissione del supporto per l’autocompletamento avrete sempre e comunque a disposizione la versione originale.

Analizziamo il file index.html, che contiene il codice di base.
Il nostro campo di input avrà un identificatore chiamato “autocomplete”, grazie al quale la funzione in JQuery potrà poi agire:

1

<input id="autocomplete" />

Infine, diamo un’occhiata alla funzione vera e propria, che sarà avviata per qualsiasi input con id="autocomplete":

1
2
3
4
5
6

$(document).ready(function() {
$("input#autocomplete").autocomplete({
	source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
	minLength:2
});
});

Source racchiude nell’array l’elenco delle parole entro cui ricercare. Nel momento in cui si inizierà a digitare una lettera presenta almeno in una delle parole nell’array, sarà aperto un menu a tendina con l’elenco dei risultati possibili.
Nell’esempio, ho imposto l’inizio della cerca a quando l’utente ha digitato almeno due caratteri (minLenght: 2). Altre opzioni da inserire nella funzione sono disponibili nei link a fondo articolo, tra cui la possibilità di ritardare la ricerca o di posizionare i risultati a piacere.

Ricerca dei termini tra i dati di un database

Se volessimo compiere una ricerca tra i dati estratti da una tabella del database, non avremo grosse difficoltà a modificare il codice. La sola parte da cambiare è l’elenco dei termini contenuti nell’array.
All’interno dello script troverete tre file per lo scopo:
– index.php: contiene il codice vero e proprio
– config.inc.php: contiene i parametri di connessione al database, che dovrete modificare in modo opportuno
– dump.sql: il dump da importare nel vostro database, che creerà la tabella “elenco” con già inserita una lista di colori con cui fare il test.

Il nostro codice sarà identico al precedente, eccetto per la sezione riguardante l’inserimento dei dati nell’array:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function() {
$("input#autocomplete").autocomplete({
	source: [<?php
	$stringa="";
	$result=mysql_query("select * from elenco", $db);
	while($row=mysql_fetch_array($result)){
		$stringa.="\"".$row['nome']."\", ";	
	}
	$stringa=substr($stringa,0,-2);
	echo $stringa
	?>],
	minLength:2
});
});

La documentazione completa sulla funzione di autocompletamento, opzioni comprese

La documentazione originale