Live-Demo

1Das Eingabefeld

<input type="text" name="ort" data-geoapi-place>

Ein normales HTML-Input. Das Attribut data-geoapi-place ist die Markierung, an der das Widget erkennt: „hier soll Autosuggest hin". name="ort" bestimmt, wie das Feld später im PHP heißt: $_POST["ort"].

2Die Skript-Zeile

<script src="https://geoapi.world/dist/geoapi-widget.js"></script>

Diese eine Zeile lädt das Widget aus unserem Server. Der Browser kümmert sich automatisch darum — du musst nichts installieren oder herunterladen.

3Die unsichtbaren Hidden-Felder

Sobald du einen Ort wählst, baut das Widget zusätzliche Felder ins Formular, die du nicht siehst, die aber mit abgesendet werden:

• $_POST["ort_geonameid"] — eindeutige Kennung (z. B. 2867714 für München)
• $_POST["ort_timezone"] — IANA-Zeitzone (Europe/Berlin)

Optional zusätzlich (siehe data-geoapi-lat, -lon, -country — wie im Detail-Tab oben aktiv): Koordinaten und Ländercode.

4Was dein Server-Skript damit macht

<?php
$ort       = trim($_POST["ort"]             ?? "");
$geonameid = (int) ($_POST["ort_geonameid"] ?? 0);
$timezone  = trim($_POST["ort_timezone"]    ?? "");

if ($geonameid === 0) {
    die("Bitte einen Vorschlag aus der Liste wählen.");
}

echo "Du hast gewählt: $ort";
echo " (geoNames-ID: $geonameid)";
echo " in der Zeitzone $timezone";

AEigenes Format für Liste & Eingabefeld

Default-Anzeige: „München, Bayern (DE)" mit Zeitzone und Einwohnerzahl als Untertitel. Mit data-geoapi-format-list und data-geoapi-format-input baust du das Layout selbst. Platzhalter {key} für Standardfelder (name, country_code, admin1_code, timezone, population, lat, lon, geonameid, feature_code) und Dot-Pfade {a.b} für extended-Blöcke ({admin1.name}, {country.name}).

<input type="text" name="fmt" data-geoapi-place
       data-geoapi-lang="de"
       data-geoapi-format-list="<strong>{name}</strong>, {admin1.name} ({country_code})<small>{population} Einw. · {timezone}</small>"
       data-geoapi-format-input="{name}">

BDaten automatisch in andere Felder/Anzeigen schreiben

Setze data-geoapi-fill="key" auf jedem beliebigen HTML-Element — sobald der Nutzer auswählt, wird das Element befüllt. Bei <input>/<textarea> in den value, sonst als Textinhalt.

<input type="text" name="meinort" data-geoapi-place>

<p>Land:        <span data-geoapi-fill="country_code"></span></p>
<p>Zeitzone:    <span data-geoapi-fill="timezone"></span></p>
<p>Einwohner:   <span data-geoapi-fill="population"></span></p>
<p>Koordinaten: <span data-geoapi-fill="lat"></span>,
                <span data-geoapi-fill="lon"></span></p>

<input type="text" data-geoapi-fill="name">

CDebug-Modus: alle Werte sichtbar

Im Entwicklungsbetrieb hilfreich: data-geoapi-debug zeigt unterhalb des Eingabefelds eine Box, in der alle gerade gesetzten Werte sichtbar sind — die Hidden-Felder, die sonst niemand sieht. Im Produktivbetrieb das Attribut weglassen.

<input type="text" name="dbgort" data-geoapi-place
       data-geoapi-lat="dbgort_lat"
       data-geoapi-lon="dbgort_lon"
       data-geoapi-country="dbgort_cc"
       data-geoapi-debug>

DLayout der Auswahlliste über CSS

Alles am Aussehen ist über CSS-Variablen anpassbar — und zur Not können auch die internen Klassen direkt überschrieben werden. Probier folgende Variante mit warmen Farben:

<style>
.stage-warm {
  --geoapi-bg:           #fef3c7;
  --geoapi-fg:           #1f2937;
  --geoapi-border:       #f59e0b;
  --geoapi-border-light: #fde68a;
  --geoapi-active-bg:    #fbbf24;
  --geoapi-radius:       8px;
  --geoapi-shadow:       0 6px 16px rgba(245,158,11,0.25);
  --geoapi-padding-x:    0.9rem;
  --geoapi-padding-y:    0.55rem;
}
</style>

<div class="stage-warm">
  <input type="text" name="stilort" data-geoapi-place>
</div>

Vollständige Variablen-Liste:

--geoapi-bg, --geoapi-fg, --geoapi-muted,
--geoapi-border, --geoapi-border-light,
--geoapi-active-bg, --geoapi-radius,
--geoapi-shadow, --geoapi-max-height,
--geoapi-padding-x, --geoapi-padding-y,
--geoapi-font-size, --geoapi-z-index

Reicht das nicht, übersteure direkt die Klassen .geoapi-suggest-list, .geoapi-suggest-list li, .geoapi-suggest-list li.geoapi-active und .geoapi-suggest-list small.

EZeitverschiebung pro Datum (DST-aware)

Die statische Zeitzone (Europe/Berlin) reicht für reine Zeitzonen-Anzeige. Für die tatsächliche Verschiebung zur UTC, die zu einem konkreten Geburtsdatum galt, gibt es die speziellen Fill-Keys timeshift, timeshift_hours, timeshift_hours_int, abbrev, dst u. a. — sie laden den Offset über /api/offset.php nach, sobald Ort + Datum + Zeit stehen.

<input type="text" name="tsplace" data-geoapi-place>
<input type="date" name="tsdate">
<input type="time" name="tstime">

<span data-geoapi-fill="timeshift"
      data-geoapi-timeshift-date="tsdate"
      data-geoapi-timeshift-time="tstime"></span>