PHP: implementare l'autocomplete con jQuery UI

In questo tutorial vedremo come implementare l'autocomplete sui campi dei form usando jQuery UI.

jQuery UI prevede che il codice lato server restituisca un array JSON di oggetti aventi le proprietà value e label. La prima è il valore reale da associare al risultato (ad esempio un ID) mentre la seconda è il testo da visualizzare nel menu a discesa.

In PHP possiamo semplicemente effettuare una query LIKE e restituire i risultati nel formato desiderato.

require_once 'config.php';
header('Content-Type: application/json');

$output = [];

$db_connection = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
$db_connection->set_charset('utf8');

$s = $db_connection->real_escape_string(trim($_GET['s']));

$res = $db_connection->query("SELECT productCode, productName FROM products WHERE productName LIKE '%$s%' LIMIT 10");

while ($row = $res->fetch_assoc()) {
    $output[] = [ 'value' => $row['productCode'], 'label' => $row['productName'] ];
}

echo json_encode($output);
exit;

Il parametro s è il termine di ricerca inviato dal form. Con jQuery UI dobbiamo ora scrivere il seguente codice.

"use strict";

$(function() {

    $( "#s" ).autocomplete({
        source: function ( request, response ) {
            $.ajax({
                url: "ajax.php",
                type: 'GET',
                dataType: "json",
                data: {
                    s: request.term
                },
                success: function ( data ) {
                    response( data );
                }
            });
        },
        select: function ( event, ui ) {
            $( "#s" ).val( ui.item.label );
            return false;
        }
    });

});

L'evento select ci permette di inserire il testo selezionato dal menu a discesa nel corrispondente campo del form. In questo callback abbiamo anche accesso alla proprietà value usando la sintassi ui.item.value.