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.