L'ultima versione di jQuery ci mette a disposizione l'autocomplete.
In pratica in una casella di testo possiamo ottenere l'autocompletamento della ricerca, tipo Google per intenderci.
Metterlo in pratica è molto facile.
Per capire il funzionamento base guardate l'esempio sulla pagina ufficiale.
Noi passeremo direttamente a caricare i risultati prendendoli da PHP e MySQL.
Come al solito per prima cosa carichiamo il necessario:
<link type="text/css" rel="stylesheet" href="template/css/smoothness/jquery-ui-1.8.19.custom.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.8.19.custom.min.js"></script>
Nel mio caso sto usando il tema Smoothness.
E' indispensabile avere le ultime versioni sia di jQuery che di jQuery UI.
Poi passiamo alla parte PHP/MySQL.
Create una pagina che dovrà eseguire una query e trasformare l'output in JSON.
Io ho usato PDO:
$dbhost = 'YOUR_SERVER';
$dbuser = 'YOUR_USERNAME';
$dbpass = 'YOUR_PASSWORD';
$dbname = 'YOUR_DATABASE_NAME';
try {
$conn = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
} catch(PDOException $e) {
echo $e->getMessage();
}
$cmd = 'SELECT * FROM articoli WHERE articolo_codice LIKE :term GROUP BY articolo_codice ORDER BY articolo_codice';
$term = "%" . $_GET['term'] . "%";
$result = $conn->prepare($cmd);
$result->bindValue(":term", $term);
$result->execute();
$arrayArticoli = array();
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$rowArray['label'] = $row['articolo_codice'];
$rowArray['value'] = $row['articolo_codice'];
array_push($arrayArticoli, $rowArray);
}
$conn = NULL;
echo json_encode($arrayArticoli);
Ho usato PDO perchè mi piace di più, ma potete usare quello che volete.
