Qualche giorno fa, per esigenze di lavoro, mi sono ritrovato a dover implementare un “autocompleter” per uno script in php. Ho cercato un po’ in giro e ne ho trovati sicuramente tanti, che però mi hanno dato un sacco di problemi in fase di implementazione.

Alcuni di voi si chiederanno: cosa diavolo è un Autocompleter?

È uno strumento, generalmente realizzato con l’ausilio di javascript ed altri linguaggi, che permette, data la stringa di ricerca inserita, di visualizzare alcuni risultati “possibili” al di sotto della barra di ricerca. Giusto per farvi un esempio ecco l’autocompleter di Google in azione:

Senza titolo-2

Ho notato che molto spesso è una feature decisamente ben accolta e richiesta: per questo motivo vi riporto il metodo da me utilizzato per implementare qualcosa del genere.

File Necessari

Prima di partire dobbiamo prendere tutti i file che ci servono. Innanzitutto abbiamo bisogno di jQuery, libreria ormai famosissima nell’ambito web, e nello specifico alcune sue parti:

Una volta scaricati tutti i file potete posizionarli nella cartella nella quale accederete successivamente dal file dove volete posizionare il form interessato. Per esempio, il form con la textbox che mi interessa li ho in un file chiamato index.php e tutti questi file da includere li ho messi nella cartella “js”.

Ecco quindi come appaiono le cartelle:

Cartella Principale

Senza titolo-22

Cartella “Lib”

Senza titolo-3

^ Cliccare per Ingrandire ^

Cosa Scrivere nei File

Apriamo il nostro index.php e per prima cosa copiamo queste righe di codice per includere tutti i file necessari:

<link href="js/jquery.autocomplete.css" rel="stylesheet" type="text/css" media="screen">
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.metadata.js" type="text/javascript"></script>
<script src="js/jquery.autocomplete.js" type="text/javascript"></script>
<script src="js/autocomplete.custom.js" type="text/javascript"></script>

dopodichè dobbiamo quindi provvedere ad assegnare al campo che ci interessa la classe “suggest” e quindi creare un altro file php da usare per il “prelievo” delle informazioni, qualsiasi sia la sorgente.

Nel file principale dove abbiamo la nostra textbox, ecco l’istruzione che dobbiamo trascrivere:

<input name="suggest1" id="suggest1" class="suggest" alt="dati.php" type="text">

Infine, nella stessa cartella del nostro file index.php, creiamo un nuovo file chiamato “dati.php”. Il suo contenuto sarà il seguente:

$q = strtolower($_GET['q']);
if (!$q) return;

$items = array(
	'Francesco',
	'Lorenzo',
	'Paolo',
	'Francescopaolo',
	'Dottor X',
	'Action Man',
	'PongiBonzi',
	'Popof'
);

foreach ($items as $value)
{
    if (strpos(strtolower($value), $q) !== false)
	{
        	echo "$value\n";
    	}
}

Ho messo qualche valore simile (Francesco e Francescopaolo) in modo tale da evidenziare il fatto che l’autocompleter provvederà a proporre entrambi se si scrive “Francesc”, per esempio. Il collegamento tra i due file avviene in fase di definizione dell’attributo “alt” del tag input precedentemente usato.

Mi sembra inutile dirvi che è tranquillamente possibile, al posto dell’uso dell’array, effettuare una query su un database e prelevare i risultati.

Byez.

  • Share/Bookmark