Usare jQuery UI Autocomplete con PHP e MySQL

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.

Ci sono solo alcune cose importanti:

• la query deve contenere il LIKE per fare da filtro mentre digitiamo
  
• la variabile $_GET deve avere come valore esattamente la parola term
• $rowArray['label'] deve avere esattamente label come valore
• $rowArray['value'] deve avere esattamente value come valore

I significati di label e value potete vederli sulla documentazione.

La parte HTML e JS rimanenti sono abbastanza semplci.

Per la parte HTML ci basta questo:

<div class="ui-widget">
  <input type="text" value="" id="txt_cerca" />
</div>

Una input con id impostato.

La parte JS invece:

$(function() {
  $("#txt_cerca").autocomplete({
    source: "cerca_articoli.php"
  });
});

Carichiamo autocomplete sulla input e impostiamo come la pagina PHP come source da cui prendere i dati.