Creare una ricerca con auto completamento del testo

Tempo di lettura dell'articolo 1 minuti

Prima di tutto dobbiamo andare a gestirci le librerie di Jquery in modo da poter gestire senza intoppi la nostra semplice procedura.

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

A questo punto impostiamo la form con il campo dove dobbiamo effettuare la ricerca:

<form action="" method="post">
    <input type="text" id="citta" name="nome" class="ui-autocomplete-input" />
    <input type="submit">
</form>

Richiamiamo la nostra pagina di ricerca per generare l’auto completamento della ricerca:

<script>
$(document).ready(function($){
    $('#citta').autocomplete({
	source:'cerca.php', 
	minLength:2
    });
});
</script>

Nel file cerca.php andiamo a creare un array con i dati partendo dai valori editati:

$term = trim(strip_tags($_GET[‘term’])); 
$a_json = array();
$a_json_row = array();

$modulo = [lettura dentro una tabella di un DB o dentro un JSon]

foreach($modulo as $row){

        $a_json_row[“value”] = $name;
        $a_json_row[“label”] = $name;
        array_push($a_json, $a_json_row);

}

A questo punto andiamo a stampare l’array sempre all’interno di cerca.php:

echo json_encode($a_json);

Molto semplice e veloce. Potete poi intervenire sullo script JS per andare a personalizzare le procedure, campi da leggere ecc.