Ich nutze den Duplizierer selbst in einem Formular, das solche Felder enthält. Meine erste Fassung entsprach dabei dem Einzeiler aus dem vorherigen Beitrag. Das Problem dabei ist allerdings, dass die AutoCompleter Funktion beim Erzeugen mit dem Felder verknüpft wird, auf das sie angewendet werden soll. Wenn man nun dieses Feld kopiert wird nicht eine neue Instanz des Ajax.AutoCompleter erzeugt, sondern die Referenz auf das alte Feld mit kopiert. Ein Eintrag im neu erzeugten Feld aktiviert also die AutoCompleter Funktion des vorherigen Feldes.

Um dieses Problem zu lösen hatte ich die erweiterte Funktion mit den beiden Callback-Funktionen erstellt. Damit ist es möglich die Referenz zum vorherigen Feld zu lösen und eine neue Instanz des Ajax.AutoCompleter nach dem Erzeugen der Kopie zu erstellen. Hier aber zuerst noch einmal die Funktion selbst. Ich habe mittlerweile auch eine Option zum Fokussieren des ersten Feldes in der Kopie hinzugefügt:

function addRow(selector, options){
	var lastRow = $$(selector).last();
	var newRow = lastRow.cloneNode(true);
	if (options.reset) {
		newRow.select('select', 'textarea', 'input').each(function(elm){
			elm.clear().checked = '';
		});
	}
	if(options.beforeInsert) options.beforeInsert(newRow);
	lastRow.insert({'after': newRow});
	if(options.afterInsert) options.afterInsert(newRow);

	if (options.focusFirst) {
		newRow.select('input', 'select', 'textarea').first().focus();
	}
}

Um die Ajax.Autocompleter Funktion nutzen zu können benötigt jedes Feld eine eindeutige ID. Nehmen wir also an, wir haben folgendes erstes Feld für unser Formular (hier ein Beispiel aus dem Artikel: Google Maps Suggest – Adress-Autovervollständigung mit Scriptaculous):

<form id="addressform" action="address_save.php" class="niceform">
	<fieldset>
		<legend>Choose an address</legend>
		<dl>
			<dt><label for="address">Address:</label></dt>
			<dd><input type="text" id="address" name="address[]" style="width: 300px;" /></dd>
		</dl>
	</fieldset>
	<fieldset>
		<input type="submit" value="Send!" />
	</fieldset>
</form>
<div id="adresse_choices" class="autocomplete"></div>
<script type="text/javascript">
	new Ajax.Autocompleter('address', 'adresse_choices', 'get_addresses.php');
</script>

Wichtig sind hierbei natürlich die eckigen Klammern am Ende des Name Attributs, damit auch alle kopierten Werte mitübertragen werden. Damit wir einer Kopie dieses Feldes eine neue Instanz hinzufügen können, müssen wir beim Kopieren auch die ID verändern. Dazu schreiben wir uns eine kleine Callback-Funktion, die genau das erledigt:

function activateAutocomplete(newRow){
	var addressInput = $A(newRow.select('input')).first();
	addressInput.id += 1;
	addressInput.stopObserving();
	new Ajax.Autocompleter(addressInput.id, 'adresse_choices', 'get_addresses.php');
}

In der 2. Zeile selektieren wir das erste Element innerhalb der neuen Zeile (wir nehmen hier also an, dass es sich dabei um das AutoCompleter Feld handelt). Diesem fügen wir in der 3. Zeile zusätzlich zur ID eine 1 hinzu. Es entstehen also Felder nach dem Muster "address1", "address11" usw. Das reicht aus um die Felder genau zu referenzieren.
In der 4. Zeile kommt die schon angesprochene Funktion zum Einsatz, die das Autocomplete für das Feld deaktiviert. Zu guter Letzt erzeugen wir eine neue Instanz des Ajax.Autocompleter. Wir können dabei als zweiten Parameter dasselbe DIV Element für die Vorschläge verwenden, da es ja nicht möglich ist, gleichzeitig in zwei Felder etwas einzutippen. Das DIV wird automatisch durch Scriptaculous unter das Feld positioniert, in dem es verwendet wird.

Damit das ganze nun auch dupliziert werden kann, fügen wir noch einen entsprechenden Link ein. Dieser muss dann die Callback-Funktion als zweiten Parameter in der Funktion erhalten. Ich verwende hier ein SPAN Element mit einem onclick Event. Es geht aber auch mit einem gewöhnlichen Link:

<span class="add" onclick="addRow('#addressform dl', {reset : true, afterInsert: activateAutocomplete})">Adresse hinzufügen</span>

Es wird durch den Selektor "#addressform dl" die gesamte Definition inklusive des Label kopiert. Ihr könnt aber auch eine andere HTML Struktur wie z.B. eine unsortierte Liste verwenden.

Das war auch schon alles. Das Beispiel könnt ihr euch hier ansehen und auch den Quellcode dazu runterladen:

Beispiel Download

Ich hoffe, dass euch die erweiterte Anwendung gefallen hat und vielleicht auf neue Ideen gebracht hat. Wenn ihr eine andere Anwendung kennt, bei der Ihr nicht weiterkommt würde ich mich wie immer über einen Kommentar sehr freuen.

Der schlechte Weg

Die einfachste und gleichzeitig auch schlechteste Methode wäre es, für jeden Index eines Arrays oder jede Eigenschaft eines Objekts eine neue Spalte zu erzeugen. Bei diesem Ansatz werden unter Umständen viele Zeilen erzeugt, die nicht immer einen Wert enthalten. Das ist zwar nicht so gravierend, aber durch diesen Ansatz erhöht sich auch die Anzahl der Spalten schnell auf eine unübersichtliche Anzahl. Zuletzt ist es hierbei bei jeder Änderung des Arrays oder Objekts notwendig die Datenbanktabelle anzupassen.

Eine bessere Lösung gefällig?

Etwas besser Lösung, die fast immer funktioniert aber nicht für alle Fälle optimal ist, wäre eine Serialisierung des Arrays oder Objekts. Hierbei werden die Daten mit der serialize() Funktion in einen String konvertiert und können somit direkt in eine VARCHAR oder TEXT Spalte speichert werden. Dabei muss der String natürlich noch durch die Funktion real_escape_string() (in diesem Beispiel von der MySQLi Klasse) “escaped” werden.

Speichern der Daten

// Das zu speichernde Array
$array = array('vorname' => 'Max', 'name' => 'Mustermann');
// Serialisieren der Daten
$string = serialize($array);
// Speichern der Daten
$mysqli->query('INSERT INTO table_name (array) VALUES ("'.$mysqli->real_escape_string($string).'")'))

Das Beispiel setzt natürlich voraus, dass die Variable $mysqli eine Instanz der MySQLi Klasse mit einer gültige Verbindung zu einer Datenbank enthält. Wir haben hier ein einfaches assoziatives Array, das serialisiert wird und anscheinend gespeichert wird. Die serialisierten Daten sehn in diesem Beispiel wie folgt aus:

Der zu speichernde String

a:2:{s:7:"vorname";s:3:"Max";s:4:"name";s:10:"Mustermann";}

Das Auslesen der Daten wird mit der Funktion unserialize() durchgeführt, die aus dem String wieder ein assoziatives Array erzeugt. Dazu lesen wir zuerst die Daten mit einem gewöhnlichen Query aus und konvertieren anschließend die Daten:

Auslesen der Daten

// Auslesen der Daten
$result = $mysqli->query('SELECT array FROM table_name');
$row = $result->fetch_assoc();
$string = $row['array'];
// Unserialisieren der Daten
$array = unserialize($string);

Diese Methode zum Speichern von komplexen Daten funktioniert recht gut, aber der serialisierte String benötigt dabei mehr Speicherplatz als für ein normales assoziatives Array eigentlich nötig wäre. Wie es eleganter geht zeige ich euch im nächsten Beispiel.

Die elegante Lösung mit JSON

Das Format JSON entspringt zwar der Skriptsprache JavaScript, aber es wird zu Zeiten von AJAX sehr oft auch serverseitig verwendet und erzeugt. Da die meisten serverseitigen Sprachen also auch JSON unterstützen bietet es sich auch für die Speicherung von komplexeren Datenstrukturen an. Die Anpassung des vorherigen Quellcodes beschränkt sich dabei auch auf eine einzige Zeile. Wir ersetzen lediglich die serialize() durch die json_encode() Funktion. Die Zeile 6 aus dem vorherigen Quellcode sieht dann folgt aus:

Speichern der Daten

...
$string = serialize($array);
...

Hierbei werden die Datei des assoziativen Arrays in die JSON Notation konvertiert. Hierbei ist der resultierende String kompakter als bei der Serialisierung, da die Länge der einzelnen Arraywerte nicht und Datentypen nicht gespeichert werden:

Der zu speichernde String

{"vorname":"Max","name":"Mustermann"}

Beim Lesen der Daten aus der Datenbank müssen sie dann selbstverständlich auch wieder in das ursprüngliche Format zurück konvertiert werden. Dabei kommt wie ihr schon vermutet die Funktion json_decode() zum Einsatz. Diese erzeugt aber normalerweise ein Standard-Objekt. Um das in unserem Beispiel verwendete assoziative Array zu erhalten, wird als zweiter Paramater “true” übergeben. Der Änderung am Quellcode aus dem vorherigen Beispiel sieht dann wie folgt aus:

Auslesen der Daten

...
$array = json_decode($string, true);

Die Verwendung von JSON sichert nicht nur die Daten sondern auch die Schlüssel eines Arrays. Dabei spielt es keine Rolle, ob das Array assoziativ ist oder Zahlen als Schlüssel verwendet. Auch wird die Sortierung dabei nicht verändert. Wer lediglich die Werte eines Array speichern möchte, also keine Schlüssel benötigt, kann auch einen noch einfacheren Weg gehen.

Array in der Datenbank light

Der einfachste Werte mehrere Daten eines Array in einer Datenbank zu speichern sind die Funktionen explode() und implode(). Hierbei werden die einzelnen Werte des Arrays durch den “Delimiter”, den man als ersten Parameter angibt voneinander getrennt bzw. miteinander verbunden. Auch bei dieser Variante müssen in den beiden Beispiel-Quellcodes nur die Funktionen für die Umwandlung ausgetauscht werden. Zu beachte ist hierbei, dass der “Delimiter” nicht in den Werten vorkommen darf. Wer also beispielsweise ein Array mit Datumsangaben im Format 2010-01-23 mit implode verbinden möchte, darf nicht den Bindestrich als “Delimiter” verwenden.

Die Werte können wie auch zuvor in einer VARCHAR oder TEXT Spalte gespeichert werden. Sehr hilfreich sind die beiden Funktionen aber auch beim Speichern in einer Spalte mit dem Spaltentyp SET. Da hierbei aber die Werte zusätzlich von Anführungsstrichen umgeben sein müssen, muss der “Delimiter” auch die Anführungsstriche enthalten. Die implode Funktion würde in der Speicherfunktion dann wie folgt eingesetzt:

Speichern der Daten in einer SET Spalte

...
$string = implode('", "', $array);
...

Fazit

Wie ihr also seht, gibt es viele Wege komplexere Daten in einer Datenbank zu speichern. Das Beispiel mit JSON als Repräsentation sollte in jeder serverseitigen Skriptsprache funktionieren, die JSON unterstützt. Solltet ihr PHP verwenden müsst ihr natürlich auch sicherstellen, dass JSON bei euch aktiviert ist. Am einfachsten geht das wie immer mit Hilfe der phpinfo() Funktion, die in der Ausgabe einen “json” Abschnitt haben sollte.

Diejenigen von euch, die einen WordPress Blog haben und sich schon einmal die Datenbanktabelle angesehen haben, werden vermutlich die JSON Strings schon gesehen haben. Den WordPress speichert z.B. Arrays eines Plugins automatisch in der JSON Notation in der “options” Tabelle ab. Das macht es einem Pluginentwickler sehr einfach das Array zu speichern.

Ich hoffe, dass euch das kleine Tutorial weiterhelfen oder auf neue Ideen bringen konnte. Über Anregungen würde ich mich wie immer sehr freuen.

Ich möchte heute zeigen, wie einfach es mit Scriptaculous möglich ist, eine Autovervollständigung mit Google-Maps-Adressen umzusetzen. Da man per AJAX nicht auf fremde Website einen AJAX-Request durchführen kann, müssen wir ein Skript als Schnittstelle zwischen Google Maps und unserer Website verwenden. Fangen wir also dieses Mal mit der serverseitigen Script an:

$json = json_decode(file_get_contents('http://maps.google.com/maps/geo?output=json&oe=utf8&sensor=false&hl=de&key=DEIN_GOOGLE_MAPS_API_KEY&q='.urlencode($_REQUEST['address'])));

echo '<ul>';
if(!empty($json->Placemark)){
	foreach($json->Placemark as $value){
		echo '<li>'.$value->address.'</li>';
	}
}
echo '</ul>';

Zuerst stellen wir eine Suchanfrage an Google Maps, wobei wir den zu suchenden Text einfach im Parameter “q” übergeben. Der Parameter “output” gibt hierbei das von Google Maps zurückgelieferte Format an. Ich habe hier JSON verwendet und wandle die Daten anschließend mit der json_decode() Funktion in ein Objekt um. Es kann aber genauso gut XML in Kombination mit einer XML Funktion sie simplexml_load_string() verwendet werden. Da JSON da kompaktere Format ist habe ich mich in diesem Beispiel dafür entschieden.

Ein weiterer interessanter Parameter ist “hl”, der die Sprache der Adressen angibt. Viele werden den Parameter auch von der Google Suche kenne. Hier werden die Adressen also in deutsch zurückgegeben. Mit Hilfe dieses einen Parameters könnt ihr also sehr schnell die Funktion auf andere Spracheversionen eurer Seite anpassen.

Damit ihr überhaupt eine Anfrage an Google Maps stellen dürft, benötigt ihr einen kostenlosen Google Maps API Key, den ihr an den “key” Parameter anhängen müsst (Danke an paddy, der mich auf das Fehlen des Keys hingewiesen hat).

Nachdem die Daten von Google Maps empfangen wurden und im Objekt vorhanden sind, geben wir sie an die JavaScript Funktion zurück. Dazu erzeugen wir einfach eine unsortierte Liste mit einem Eintrag pro gefundener Adresse.

Und jetzt kommen wir zum sehr umfangreichen clientseitigen Script. Dazu müssen wir erst einmal ein Formular mit einem Textfeld erzeugen. Außerdem benötigen wir ein DIV, in dem die Ergebnisse ausgegeben werden. Zu guter Letzt kommt dann noch das JavaScript, das den ganzen AJAX-Request und das Behandeln der Empfangenen Daten erledingen muss. Was aber sehr kompliziert klingt, ist recht kurz umgesetzt:

<input type="text" id="address" name="address" />
<div id="adresse_choices" class="autocomplete"></div>
<script type="text/javascript">
	new Ajax.Autocompleter('address', 'adresse_choices', 'get_addresses.php');
</script>

Die ganze Sache lässt sich mit einer einzigen Zeile JavaScript erledigen. Selbstverständlich müssen dazu noch im Kopfbereich die “prototype.js” sowie anschließend die “scriptaculous.js” eingebunden werden. Die Funktion Ajax.Autocompleter() gehört hierbei zum Funktionsumfang von Scriptaculous. Das fertige Resultat sieht dann wie folgt aus:

Die hier verwendete ABC-Straße ist kein Witz, sondern die Adresse von Google Deutschland. Eine weitere schöne Eigenschaft von Google Maps ist die automatische Rechtschreibkorrektur, die bei fehlehaften Eingaben durchgeführt wird. Selbst eine Eingabe wie “plazt der luftblöcke” führt trotzdem zu dem gewünschten Platz vor dem ehemaligen Berliner Flughafen. Um die Sache testen zu können, habe ich hier ein kleines Beipsiel erstellt, dass ihr euch auch gerne im Quellcode runterladen könnt. Ich habe zusätzlich noch eine Funktion verwendet, die den Suchbegriff hervorhebt:

Beispiel Download

Wir ihr also sehen könnt, ist es mit der Ajax.Autocompleter() Funktion und einem servreseitigen Skript sehr einfach möglich, auch Daten von anderen Seiten auszuliefern. Das dazu benötigte PHP Skript kann durch kleine Veränderungen an die entsprechende extrene Datenquelle und das zurückgelieferte Format angepasst werden. Die Funktion lässt sich aber natürlich auch genauso gut mit jQuery oder einem anderen Framework umsetzen. Dazu muss dann aber eventuell das zurückgelieferte Format des PHP Skript auch noch angepasst werden.

Ich hoffe das Beispiel hat euch gezeigt, wie vielfältig sich eine Autovervollständigung einsetzen lässt. Habt ihr auch schon einmal mit externen Daten gearbeitet? Oder habt ihr vielleicht eine Idee, konntet sie aber bisher nicht umsetzen? Über ein Kommentar dazu würde ich mich sehr freuen.