AutoAanvullen met jQuery UI en JSON

AutoAanvullen wordt met de jQuery UI Autocomplete widget wel heel eenvoudig.

JSON staat voor JavaScript Object Notation en is een deelverzameling van de programmeertaal JavaScript. Het wordt gebruikt voor het uitwisselen van datastructuren, met name in webapplicaties die asynchroon gegevens ophalen van de webserver zoals AJAX.

De eenvoud van JSON heeft geleid tot een grote populariteit ervan, met name als een alternatief voor XML. Omdat gegevens worden uitgewisseld in de vorm van JavaScript-expressies, kunnen de gegevens worden ingelezen in een JavaScript-applicatie door simpelweg de JSON-expressie te evalueren; er is dus geen aparte parser voor nodig. Voor een groot aantal andere programmeertalen zijn functiebibliotheken beschikbaar voor het lezen en schrijven van JSON-expressies.

Bron : JSON - Wikipedia


HTML


JavaScript
$(':input#city').autocomplete({
    source: 'cities.php'
});

PHP

Voor de array key index in het resultaat wordt een label en of value verwacht.

cities.php :

$sql = "SELECT id, description FROM cities WHERE description LIKE '".mysql_real_escape_string($_GET['term'])."%' LIMIT 10";
$result = mysql_query($sql);
if (mysql_num_rows($result) != 0)
{
    $cities = array();
    while($city = mysql_fetch_array($result))
    {
        $cities[]['label'] = $city['description'];
        // $cities[]['value'] = $city['id'];
    }
    header('Content-type: application/json');
    echo json_encode($cities);
}

Resultaat

JSON Response :

[{"label":"Rothem"},{"label":"Rotstergaast"},{"label":"Rotsterhaule"},{"label":"Rotterdam"},{"label":"Rotterdam Albrands"},{"label":"Rottevalle"},{"label":"Rottum (Friesland)"},{"label":"Rottum (Groningen)"}]

Autocomplete


Zie ook : AutoAanvullen van Nederlandse plaatsen | Database van Nederlandse plaatsen

Meer informatie : jQuery UI - Autocomplete Demos & Documentation | JSON | JSON - Wikipedia | PHP: json_encode - Manual | PHP: json_decode - Manual