Beispiel: (habs mal mit Berliner Postleitzahlen gemacht)
Meine Seite enthält folgendes:
- ne verstecktes <iframe> mit dem Namen dummie
- ein Formular mit dem Namen frm
- darin ein Textfeld
- und ein <select> mit namens loc_out, welches erstmal mit visibility:hidden versteckt wird
in dem Textfeld rufe ich bei Tastatureingaben eine Funktion auf:
Code:
<input type="text"name="plz_in"maxlength="5"onkeyup="show_location(this)">
Die aufgerufene Funktion:
Code:
function show_location(objInput)
{
if(!String(objInput.value).match(/^\d{5}$/))
{
objInput.form.loc_out.style.visibility="hidden";
}
else
{
window.dummie.location="plz.php?plz="+objInput.value;
}
}
....überprüft, ob die Eingabe aus 5 Ziffern besteht.
Wenn nicht, wird das <select> versteckt(falls es sichtbar war
)
Ansonsten wird im versteckten iFrame ein PHP-Skript aufgerufen, welchem als Parameter die eingegebene Zahl übermittelt wird.
Das PHP-Skript sucht in der DB nach der Postleitzahl und schreibt je nach Suchtreffer den nötigen JS-Code in die Seite, mit welchem die Liste im Elternfenster manipuliert wird.
Der statische Teil dieses JS-Codes:
Code:
<script type="text/javascript">
<!--
function get_location()
{
if(typeof parent.dummie=='object' && typeof parent.document.frm.loc_out=='object')
{
objList = parent.document.frm.loc_out;
objList.options.length=0;
//Hier kommt der dynamische Teil, der durch PHP erzeugt wird
}
}
if(self==top)
{
document.location='index.htm';
}
else
{
get_location();
}
//-->
</script>
...das Skript löscht erstmal die <option>'s aus der Liste.
Der dynamische Teil: (Es besteht bereits eine Variable
$location, welche den String "unbekannt" enthält)
PHP:
<?php
//Wurde Parameter übergeben?
if(isset($_GET['plz']))
{
//Existiert die gesuchte PLZ?
//Ich hab statt einer DB alles in einem assoziativen Array($locations) abgelegt,
//und prüfe, ob ein Element mit dem Schlüssel PLZexistiert
if(isset($locations[$_GET['plz']]))
{
$location=$locations[$_GET['plz']];
}
//Ich splitte $location und sortiere ihn ein wenig ...falls die Postleitzahl gefunden wurde,
//könnte sie zu mehreren Ortsteilen gehören...welche ich
//jeweils kommasepariert in den Arrayelementen habe
$location=explode(',',$location);
array_unique($location);
sort($location,SORT_STRING);
//Für jede Option, welche ich in die Liste einfügen will, folgende JS-Anweisung erzeugen
foreach($location as $key=>$value)
{
echo "\n\tparent.add_option('".$value."');";
}
}
?>
Die Funktion add_option(), welche sich wiederum im Elternfenster befindet, sieht folgendermassen aus:
Code:
function add_option(strText)
{
objList=document.frm.loc_out;
objList.options[objList.options.length]=new Option(strText);
objList.style.visibility='visible';
}
....sie bekommt als Parameter eine Zeichenkette übergeben...den Text der einzufügenden <option>
Sie erzeugt diese Option und zeigt die Liste an(falls dies noch nicht der Fall ist)
Wenns fertig ist, siehts dann
so aus.
Also, wenn du so willst, fast soetwas wie eine DB-Abfrage per Javascript, ohne (sichtbares) (re)loaden.
