Studien: Suchfeld, Anzeige und Übernahme von Vorschlägen.

Hier wird gezeigt, wie Eingaben in ein Suchfeld zu Vorschlägen aus der Datenbank führen.

Beispiel eines Suchfeldes:
Gib den Namen oder die Postleitzahl einer deutschen Stadt ein. Dann klicke auf einen der vorgechlagenen Werte, um ihn zu übernehmen.

Was geht ab, was brauchst du auf deiner Seite?

Bedingung: Javascript muss aktiv sein. Wenn nicht, musst du mit dem HTML Tag <noscript></noscript> darauf hinweisen.
Das Suchfeld ist ein Input-Textfeld. Dazu gehört ein Bereich, in dem die Vorschläge gezeigt werden.
Im Suchfeld wird nach jedem Tastendruck (javascript:onkeyup) eine Javascript-Funktion aufgerufen. Sie sendet die bisher eigegebenen Zeichen an ein selbst entwickeltes Programm (z.B. in der Programmiersprache PHP) zum Server, der unter derselben Domain erreichbar ist.
Dieses PHP-Programm sucht in der Datenbank nach Einträgen mit der übergebenen Zeichen-Kombination. Die Suche kann beliebig komplex sein und über mehrere Tabellen gehen. Das PHP-Programm entscheidet, wieviel Vorschläge gesendet werden (z.B. LIMIT 0,10)
Inzwischen horcht das Javascript-Programm auf eine Antwort, die undefiniert lange auf sich warten lässt.
Wenn die Antwort kommt, wird sie unterhalb des Suchfeldes in mehreren Zeilen angezeigt.
Bei Mausklick auf einen der Vorschläge kopiert Javascript diesen Wert in das Suchfeld.

Input-Textfeld zur Eingabe des Suchbegriffs

<div style="position:relative; font-size:120%">
  <input
  id          = "such_ort" type=text name="keywords" size=30 max-length=60 value=""
  onkeyup     = "holeVorschlaege('osmer.de',this.id,this.value)"
  onblur      = "loescheVorschlaege(this.id)"
  placeholder = "Was suchst du?" />
  <div id='such_ort_vorschlaege' class="vorschlaege" style="font-size:66%"></div>
</div>

Javascript-Funktion holeVorschlaege

Die Funktion ruft ein Programm auf dem Server auf und übergibt die bisher eingetippten Zeichen.

Datei ajaxVorschlaegeOrte.js

var id_sic;
function holeVorschlaege( host, id, wert )
{
  if (wert.length == 0 )
  {
    document.getElementById( id+"_vorschlaege" ).style.display = "none";
    document.getElementById( id+"_vorschlaege" ).innerHTML = "";
  }
  else if ( request && wert.length > 0 )
//&& (id == "such_ort" || id == "treffpunkt" || id == "gebaeude"))
  {
    id_sic = id;
    var url = "http://osmer.de/studien/suchfeld/ajaxVorschlaegeOrte.php?k="+id+"&v="+wert;
    if (id=="treffpunkt" || id == "gebaeude") url += "&ORT="+document.getElementsByName("ORT")[0].value;
    document.getElementById( id ).title = url;
    request.open('post', url, true);           // Request öffnen
    request.send(null);                        // Request senden
    request.onreadystatechange = zeigeVorschlaege; // Request auswerten
  }
}

PHP-Programm auf dem Server

Zu beachten: Die Javascript-Funktion kann nur ein Programm aufrufen, das unter derselben Domain erreichbar ist wie die sendende Seite. Aus Sicherheitsgründen (same origin policy) sollte ein Browser die Verbindung zu einer anderen Domain sperren.

Wenn wie hier aus der Domain osmer.de die Datenbank auf remso.eu abgefragt werden soll, muss das eigene PHP-Programm auf die Datenbank des fremden Servers zugreifen.

Testweise kann dieses Programm auch direkt aufgerufen werden:

http://osmer.de/studien/suchfeld/ajaxVorschlaegeOrte.php?k=such_ort&v=gerau

Es öffnet die Datenbank (auf dem fremden Server) und setzt ein SQL Kommando ab. Die Zugangsdaten zur Datenbank sollten aus Sicherheitsgründen in einer include-Datei verborgen sein, die aus dem Internet nicht erreicht werden kann.

Die Suchergebnisse werden ausgegeben und so zum rufenden Javascript-Programm geschickt, das diese Daten anzeigt.

Javascript: Anzeige der Vorschläge

Javascript: Klick auf einen Vorschlag

12.12.2015 studien/suchfeld/index.php