Autocomplete

vorige Präsentation: Async/Await | zurück zum Buch-Kapitel [esc] | Nächste Präsentation API verwenden

Wir werden in diesem Beispiel ein Autocomplete-Feld bauen. Beginnen wir mit dem Backend:

Backend

Am Server befindet sich eine Datenbank mit ca. 170.000 Städten. Mit der Anfrage

search.php?term=w

sollen nur die Städte, die mit w beginnen, geladen werden und als JSON-Array zurück gegeben werden:

[
    "Wa,GH",
    "WaKeeney,US",
    "Waabs,DE",
    "Waaia,AU",
    "Waajid,SO",
    "Waake,DE",
    "Waakirchen,DE",
    "Waal,DE",
    ...
    "Wüstenzell,DE",
    "Wüstheuterode,DE",
    "Wāhan Murad,PK",
    "Wān Yampēng,MM",
    "Wŏnsŏngil-tong,KR",
    "Włocławek,PL",
    "Włodawa,PL",
    "Włoszczowa,PL",
    "Wāsiţ,EG",
    "Wąwolnica,PL"
]

Das sind ca. 5000 Namen.

Der Output des PHP-Programmes ist also JSON. Das muss mit dem HTTP Header Content-Type angekündgt werden:

header('Content-Type: application/json');
// $cities aus der Datenbank holen
echo json_encode($cities);

Frontend

Für das Frontend kann man eine fertige Library verwenden, z.B. JavaScript-autoComplete:

new autoComplete({
    selector: '#cityinput',
    source: (term, handle_response) => {
      // schicke suchwort 'term' ans backend
      // wenn die datenvorliegen, rufe die funktion handle_response auf
    }
});

Autocomplete

vorige Präsentation: Async/Await | zurück zum Buch-Kapitel [esc] | Nächste Präsentation API verwenden