Kau-Boys blog » JavaScript

Pac-Man auf Google weiterhin online mit Zweispielermodus

Bernhard — Mon, 24 May 2010 13:30:21 +0000

Google hatte bereits angekündigt, dass das Pac-Man Logo nicht wie sonst nur 24 Stunden, sondern 48 Stunden online sein wird, da es zu cool ist um nach einem Tag schon wieder zu verschwinden. Es ist auch weiterhin im Zweispieler-Modus spielbar, wobei man zum Starten des Zweispielmodus einfach auf die “Insert Coin” Schaltfläche klicken muss:

Quelle: Google

Ihr könnt ja mal versuchen “stereo” zu spielen. Sofern man den Pac-Man und die Pac-Woman (oder wie man den zweiten Spieler nennt) immer auf der Seite lässt, mit dessen Hand man ihn steuern ist das garnicht man so schwer. Nachdem ich heute mal mehr als die ersten beiden Levels gespielt habe (wobei sich natürlich das Logo nicht ändert), habe ich auch eine Zwischensequenz gesehen:

Quelle: Google

Die Bilder zur Zwischensequenz sind mir auch schon im Sprite zum Spiel aufgefallen, welches alle Bildelemente enthält.

Wer das Spiel auch jetzt noch einmal spielen möchte, kann es unter folgendem Link noch immer erreichen: http://www.google.com/pacman/.

Wie lange das Spiel dort noch zur Verfügung stehen wird kann ich euch aber leider nicht sagen. Also am besten gleich mal ausprobieren, wer das Spiel die letzen beiden Tage auf Google verpasst hat.

Eilmeldung: Pac-Man bei Google

Bernhard — Fri, 21 May 2010 17:25:44 +0000

Eigentlich hatte ich für heute schon einen tollen Artikel fertig. Aber gerade habe ich erfahren, dass es heute bei Google ein geniales Logo gibt. Heute ist der 30. Geburtstag von Pac-Man (gut eigentlich ist er morgen am 22. Mai, aber da Pac-Man in Japan erfunden wurde, ist er bei uns schon jetzt). Google hat sich das mal wieder zum Anlass genommen ein Logo dafür zu erstellen:

Quelle: Google

Das alles wäre aber keinen Blogartikel wert, denn es kommt ja bestimmt einmal spätestens alle 14 Tage vor, dass Google solch ein Logo auf seiner Startseite hat. Das geniale am heutigen Logo ist aber, dass das Logo nicht nur ein Bild ist, sondern SPIELBAR ist. Gesteuert wird es mit den Cursor-Tasten:

Quelle: Google

Der absolute Hammer ist aber, wie das ganze umgesetzt ist. Man würde hier natürlich als erstes auf Flash tippen. Aber nein, Google wäre ja nicht einer der Pioniere des modernen Internets, wenn sie sich nicht etwas Besseres einfallen lassen. Das gesamte Spiel besteht aus HTML-Quellcode. So ist jeder Punkt, der aufgefressen werden kann ein DIV mit einer Hintergrundfarbe. Jedes dieser DIVs ist absolut positioniert. Wenn er aufgefressen wurde, wird er per CSS und “display: none;” ausgeblendet.

Zur Spielsteuerung wird eine ca. 60kb große JavaScript-Datei verwendet, die sogar die Ausgabe des kultigen Sounds ermöglicht. Alles in allem eine wirklich gelungene Aktion von Google und ein Beweis dafür, die viel man in heutigen Zeiten ohne den Einsatz von Flash in einem Browser tun kann.

Was haltet ihr von der Aktion? Wie viele Levels habt ihr geschafft? Passiert etwas Tolles ab einem bestimmten Level? Kommentare sind wie immer gern gesehen.

Tutorial: Drag-and-Drop mit Scriptaculous – Teil 2: Droppables

Bernhard — Mon, 15 Mar 2010 15:29:16 +0000

Nachdem wir uns in Teil 1 des Tutorials mit der Draggable Klasse beschäftigt haben, wenden wir uns heute seinem Bruder der Droppables Klasse zu. Mit ihr können wir auf ein aufgenommenes Element reagieren. Eine typische Anwendung sind Einkaufkörbe auf Online-Shops. Ich möchte daher einen einfachen Einkaufswagen demonstieren.

Der Quellcode für dieses Beispiel

Zuerst einmal wieder der Quellcode für dieses Beispiel. Ich werde wie auch schon im ersten Teil des Tutorials die wichtigen Zeilen etwas genauer erklären. Die Zeilen 1-34 enthalten das grundlegende Gerüst der HTML-Seite sowie die Stylesheets, auf die ich nicht näher eingehen möchte:




	
		Drag-and-Drop Part 2
		
		
		
	
	
		Drag-and-Drop

In den Zeilen 35-39 sind zwei einfache “Artikel” aufgeführt (in unserem Fall einfache farbige DIVs) sowie der “Warenkorb”, der eine leere unsortierte Liste enthält. In diese fügen wir dann per Drag-and-Drop die Waren ein. Sehen wir uns nun aber den interessanten Teil des Quellcodes an, das JavaScript. Die Zeilen 41-46 sollten aus dem ersten Teil des Tutorials bekannt sein. Wir erzeugen hier zwei Draggables wobei wir die Option reset auf true setzen, damit die Artikel beim “loslassen” wieder auf ihre ursrpüngliche Position zurückkehren. Nun aber zum neuen Teil der Droppables-Klasse:

Droppables.add('shopping_cart', {
	onDrop: addItem,
	hoverclass: 'hover'
});

Wichtig ist hier, dass wir keine Instanz der Klasse durch das Schlüsselwort new erzeugen. Es existiert vielmehr schon eine Instanz, der wir mit der add() Funktion eine neue “Drop-Zone” hinzufügen. Es ist also möglich mehrere Bereiche einer Website für die Reaktion auf Draggables zu verwenden. Es wäre z.B. möglich einen “Papierkorb” einzurichten, mit dem man einenen bereits hinzugefügten Artikel wieder aus der Liste entfernen kann bzw. dessen Anzahl verringern.

Der add() Funktion können auch mehrere Optionen übergeben werden, welche das sind könnt ihr in der API zu Droppables nachlesen. Ich verwende hier die hoverClass Option, die der “Drop-Zone” eine Klasse zu weist, wenn der Benutzer mit einem Draggable darüber steht. Zusätzliche gebe ich eine Callback-Funktion für das onDrop Event an. Wie ihr der Funktion addItem() entnehmen könnte, bekommt die onDrop() Funktion eine Referenz auf das aufgenommene Elemente sowie auf die “Drop-Zone” und das Event selbst übergeben. In der Funktion selbst fügen wir den Artikel an die Liste an und setzen die Anzahl auf 1, sofern er noch nicht enthalten ist. Wenn er enthalten ist erhöhen wir dir Anzahl um 1.

Das Beispiel

Das oben beschriebene Beispiel sieht dann wie folgt aus (es darf aber gerne unter Verwendung von Bildern anstelle von DIVs und mehr CSS noch ansprechender gestaltet werden):

Warenkorb

Wie ihr also sehen könnt ist es sehr einfach ein Element für die Interaktion mit Draggables zu verwenden. Was ihr dabei mit den Elementen macht ist eurer Fantasie überlassen. Die Möglichkeiten sind schier unbegrenzt. Ich möchte euch also dazu animieren einfach einmal mit der Funktion zu experimentieren.

Das war es dann auch schon wieder mit diesem Teil des Tutorials. Im nächsten Teil sehen wir uns einen sehr speziellen Fall von Drag-and-Drop an und zwar mit dem Sortieren von Elementen. Wie einfach so etwas möglich ist und wie leicht sich die Sortierreihenfolge auslesen lässt, das erwartet euch in Teil 3 des Tutorials. Für welche Einsatzzwecke habt ihr bisher Draggables und Droppables genutzt? Über einen Kommentar dazu würde ich mich wie immer sehr freuen.

Tutorial: Drag-and-Drop mit Scriptaculous – Teil 1: Draggable

Bernhard — Tue, 02 Mar 2010 16:38:32 +0000

Heute möchte ich mein angekündigtes Tutorial über Drag-and-Drop starten. Das Ziel dieses Tutorials ist der Nachbau einer dynamischen Newsseite, wie ich sie in meinen Artikel Öffentlich-rechtlich und vorbildhaft – So muss eine Web 2.0 zu Olympia aussehen vorgestellt habe. Da eine solche Seite mit vielen verschiedenen Techniken zusammengesetzt ist, werden wir immer kleine Teile auf dem Schritt zur fertigen Seite nachvollziehen.

Im ersten Teil geht es um die Grundlage einer Seite mit Drag-and-Drop. Wir verwenden für dieses Tutorial die Drag-and-Drop Funktionalität von Scriptaculous, welches eine Erweiterung des Prototype Frameworks ist. Um die hier gezeigten Funktionen selbst nachprogrammieren zu können benötigt ihr also zuerst einmal die beiden Frameworks.

Der Quellcode für dieses Beispiel

Beginnen wir also mit dem Beispiel. Zuerst einmal benötigen wir etwas HTML in dem wir ein Element platzieren, welches wir dann aufnehmen möchten. Für das Element nehme ich exemplarisch ein DIV, aber ihr könnt auch z.B. ein Bild verwenden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
<head>
	<head>
		<title>Drag-and-Drop Teil 1</title>
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="scriptaculous.js"></script>
		<style type="text/css">
			#draggable {
				width: 100px;
				height: 100px;
				padding: 30px;
				background-color: #39c;
				border: 1px solid #000;
				cursor: move;
			}
		</style>
	</head>
	<body>
		<h1>Drag-and-Drop</h1>
		<div id="draggable"></div>
		<script type="text/javascript">
			new Draggable('draggable');
		</script>
	</body>
</html>

Wichtig für das Aktivieren der Draggable Funktion auf ein Element ist eine ID für das Element. Das DIV hat hier die ID “draggable”. Im Kopf werden die beiden JavaScript Dateien für Prototype und Scriptaculous eingebunden. Wichtig ist hierbei, dass zuerst Prototype eingebunden wird. Zusätzlich ist noch etwas CSS angegeben um dem DIV einen Rahmen und eine Hintergrundfarbe zu verpassen. Alles was nun notwendig ist, um das DIV aufnehmbar zu machen ist eine einzige Zeile JavaScript:

new Draggable('draggable');

Es wird hier eine neue Instanz des Draggable Objekts erzeugt. Dem Konstruktor wird hierbei die ID des Elements übergeben, welches aufnehmbar sein soll.

Ein Beispiel gefällig

Da dieser Blog auch Prototype einsetzt, sollten wir es nicht bei einem Quellcode Auszug belassen, sondern einfach mal hier ein solches DIV einfügen. Also, hier kommt es:

Dieses DIV kann nun beliebig im Sichtbaren Bereich verschoben werden. Die Klasse bietet aber auch viele Optionen, die in einem Hash an die Funktion als zweiten Parameter übergeben werden können. Wir können z.B. die Bewegung eines Elements auf die horizontale beschränken und zusätzlich das Element beim “Loslassen” des Elements wieder auf seine ursprüngliche Position zurücksetzen. Der JavaScript Befehl dazu sieht wie folgt aus:

new Draggable('draggable2', {constraint: 'horizontal', revert: true});

Ich habe hier die ID um eine Zwei erweitert, damit ich auch dieses Beispiel hier vorführen kann. Wichtig ist natürlich immer, dass ihr für die verschiedenen Elemente unterschiedliche IDs verwendet und niemals eine ID in zwei Instanzen verwendet. Das DIV verhält sich dann wie folgt:

Da es hier in diesem Tutorial nicht darum geht alle möglichen Optionen zu erklären möchte ich euch gerne auf die API Referenz der Draggable Klasse verweisen. Dort findet ihr eine Liste aller Optionen und einige weitere Beispiele.

Damit möchte ich auch schon den ersten Teil des Tutorials abschließen. Ihr solltet einfach einmal die verschiedenen Optionen ausprobieren um zu sehen, wie sich das DIV dabei verhält. Im zweiten Teil beschäftigen wir uns mit “dem Bruder” von Draggable. Dabei handelt es sich um die Droppables Klasse, die es ermöglicht ein aufgenommenes Element “einzufangen” und auf das Element zu reagieren.

Öffentlich-rechtlich und vorbildhaft – So muss eine Web 2.0 zu Olympia aussehen

Bernhard — Tue, 23 Feb 2010 23:46:48 +0000

An dieser Stelle muss ich mal ein Lob loswerden. Zurzeit laufen ja die Olympischen Winterspiele in Vancouver und Whistler. Und natürlich ist die Präsenz im Web auch extrem hoch. Im Fernsehen sind die Spiele vor allem in ARD und im ZDF im Free-TV und bei den digitalen Kanälen der beiden Öffentlich-rechtlichen zu sehen. Das erwartet man auch, denn dafür zahlen wir ja auch brav unsere Gebühren.

Was man nicht unbedingt erwartet und was mich sehr überrascht hat ist der sehr gute Web 2.0 auftritt. Es ist immer sehr gut zu sehen, auf welchen Kanälen gerade etwas live zu sehen ist und was gerade für neue Entscheidungen gefallen sind. Außergewöhnlich ist allerdings, wie dynamisch sich die Seite an die eigenen Interessen anpassen lässt:

Quelle: olympia.ard.de

Wie ihr auf dem ersten Screenshot sehen könnt können die verschiedenen Bereiche ausgelendet werden. Die Einstellungen werden hierbei in einem Cookie gespeichert, sodass die Einstellungen bei einem erneuten Besuch erhalten bleiben.

Eine andere Möglichkeit die Seite anzupassen besteht darin die verschiedenen Elemente per Drag-and-Drop zu verschieben. Dies geht genauso flüssig und unproblematisch wie man es auch von iGoogle oder ähnlichen Seiten gewohnt ist. Auch hier werden die Anordnungen in demselben Cookie gespeichert:

Quelle: olympia.ard.de

Ebenfalls sehr nett gemacht ist die Mediabox, die sehr an die Steuerung von diversen MP3-Playern mit Albumansicht erinnert. Einige Inhalte seinen außerdem erst dann geladen zu werden, sobald der Benutzer an die entsprechende Stelle scrollt.

Einige von euch werden sich jetzt fragen wieso ich einen solchen Artikel geschrieben habe. Einerseits um wirklich mal ein Lob an einen sehr guten Internet Auftritt loszuwerden. Andererseits aber auch um einen kleinen Überblick zu geben, was alles mit recht einfachen Mitteln möglich ist. Dem Quellcode konnte ich entnehmen, dass die ARD auf das JavaScript-Framework MooTools setzt.

Ich möchte diesen Artikel zum Einstieg für eine kleine Reihe rund um Drag-and-Drop Funktionen und andere oft gesehene Techniken zu nehmen. Im ersten Teil dieser Reihe werde ich auf die Grundlagen von Drag-and-Drop eingehen und diese am Beispiel des Scriptaculous Frameworks zeigen. Anschließend werden ich dann zeigen, wie man per Drag-and-Drop Elemente sortieren kann. In einem weiteren Teil geht es dann vermutlich um die Kombination der Sortierung mit AJAX.

Wer jetzt Lust bekommen hat sich das Ganze mal live anzusehen kann das auf der Olympia Website der ARD tun. Und das ZDF? Ja, das möchte ich nicht unerwähnt lassen. Auch hier gibt es viele Informationen rund um die WM und auch Livestreams. Aber die Seite ich nicht so dynamisch wie die der ARD. Besser gelöst finde ich hier aber der Liveticker. Dieser bekommt zwar die gleichen Einträge wie der bei der ARD, aber er aktualisiert sich von selbst und stellt auch sehr schön die aktuellen Zwischenergebnisse dar. Er läuft bei mir zurzeit fast ständig im Hintergrund. Also auch hier solltet ihr auch mal die Olympia Website des ZDF ansehen.

Ich hoffe ihr freut euch auf die kleine Tutorialreihe. Ich würde mich aber auch über eure Kommentare zu den Websites freuen.

Zeilen-Duplizierer mit AutoComplete Felder nutzen

Bernhard — Wed, 17 Feb 2010 13:18:55 +0000

Ich bekam heute in einem Kommentar die Frage gestellt, ob mein Zeilen-Duplizierer aus dem Beitrag: Einfacher Zeilen-Duplizierer mit Prototype auch auf Feldern funktioniert, die die Scriptaculous Ajax.AutoCompleter Funktion verwenden.

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):


	
		Choose an address
		
			Address:

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:

Adresse hinzufügen

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.

Blog oder Website fit machen für den IE6

Bernhard — Sat, 30 Jan 2010 16:22:32 +0000

Wie auf vielen News-Seiten zu lesen ist stellt Google ab Mitte des Jahres offiziell den Support für den Internet Explorer in der Version 6.0 ein. Unter den Besuchern meines Blog befindet sich zwar nur ein verschwindend geringer Prozentsatz an IE6 Nutzern, aber auch diese sollten meine Website einigermaßen ansehnlich präsentiert bekommen.

Das größte Problem ist oft, dass die schönen Themes nicht auf den IE6 angepasst wurden und daher zu sehr unschönen Darstellungen führen. Ich habe in einer virtuellen Maschine noch eine Installation vom Internet Explorer 6 laufen und damit mal selbst meinen Blog getestet. Das Ergebnis sah leider wie folgt aus:

Wie ihr hier sehen könnt sind die transparenten PNG Bilder im IE6 nicht transparent, da dieser nur transparente GIF Bilder unterstützt. Viel schlimmer war aber, dass die Sidebar mit den Widgets komplett nach unten gerutscht war. Um das zu beheben hätte ich sehr viele Dinge im CSS Layout und vermutlich auch im HTML-Quellcode ändern müssen. Daher habe ich überlegt, was man stattdessen tun könnte.

Die Lösung: Google Chrome Frame

Schon vor längerer Zeit hatte ich etwas vom Google Chrome Frame gelesen, der die Webkit Rendering Engine und die JavaScript Engine des Chrome Browsers in den Internet Explorer bringt. Dazu muss der Benutzer lediglich ein Plugin für den Internet Explorer installieren und der Website-Betreiber muss dem Plugin mitteilen, dass der Inhalt automatisch damit gerendert werden soll.

Den Browser zum Rendern mit dem Chrome Frame veranlassen

Alles was der Website-Betreiber tun muss, ist folgenden Meta-Tag in seinen Quellcode einzufügen:

Das X-UA-Compatible Meta-Tag sorgt dafür, dass das Plugin aktiviert wird und der Benutzer den Inhalt richtig dargestellt bekommt, vorausgesetzt natürlich er hat es auch installiert. Um einen Benutzer des Internet Explorers dazu zu bewegen das Plugin zu installieren, hat Google ein kleines JavaScript-Snippet bereitgestellt, mit dem der Benutzer einen Link zur Download-Seite des Plugins bekommt:

Damit die Aufforderung zum Download auch nur Benutzern des IE6 angezeigt wird, habe ich zusätzlich ein Conditional Comment benutzt, um das Snippet nur auf IE6 Benutzer anzuwenden, damit Benutzer des Internet Explorer 7 und höher keine Aufforderung bekommen. Außerdem müssen damit auch alle Nutzer eines andern Browsers nicht die JavaScript-Datei vom Google Server laden.

Der Blog nach der Installation des Plugins

Für diejenigen von euch, die etwas skeptisch sind, ob der ganze Aufwand lohnt, habe ich hier nun das “nachher” Bild, damit ihr sehen könnt, dass es wirklich funktioniert:

Wie ihr sehen könnt, sieht der Blog nun wieder richtig aus. Als kleinen Bonus des Plugins könnt ihr auch den Inspektor nutzen, wie man ihn von Chrome oder Safari gewöhnt ist. Aber die Besucher eures Blog werden das wohl eher nicht nutzen.

Ich hoffe, dass euch dieser Tipp helfen konnte. Mich würde interessieren, was ihr vom Google Chrome Frame haltet oder was für euch dagegen spricht. Hat ihn vielleicht jemand auch im Einsatz und schon echte Probleme oder Nachteile damit feststellen können? Über Kommentare würde ich mich wie immer sehr freuen … über ein baldiges Aussterben des IE6 aber noch viel mehr

Google Maps Suggest – Adress-Autovervollständigung mit Scriptaculous

Bernhard — Tue, 06 Oct 2009 22:22:36 +0000

Viele nutzen Autovervollständigungen auf ihrer Website. Es ist nicht nur eine sehr beeindruckende Technik, sondern zudem eine sehr nutzerfreundliche. Zusätzlich kann sie dazu dienen, dass in einem Formular möglichst gültige Werte gespeichert werden. Selbstverständlich müssen alle Daten serverseitig erneut überprüft werden.

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 '';
if(!empty($json->Placemark)){
	foreach($json->Placemark as $value){
		echo ''.$value->address.'';
	}
}
echo '';

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:

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.

Die Grenzen der Frame-Weiterleitung sprengen

Bernhard — Tue, 29 Sep 2009 18:09:29 +0000

Viele Hoster bieten günstige Domains ohne Webhosting Komponenten an. Bei einigen Hoster wie z.B. Strato handelt es sich aber leider nur um Domains mit der Möglichkeit der Frame-Weiterleitung. Das ist aber teilweise vor der Bestellung nicht zu sehen.

Manch einer wird sich eventuell darüber freuen, da er irgendwo ein kostenloses Hosting mit einer sehr langen URL hat und durch die Frameweiterleitung den Besuchern immer eine kurze Domain präsentieren kann. Doch die Sache hat auch ihre Haken.

Das Lesezeichen-Problem

Das navigieren innerhalb der Seite gestaltet sich für den Besucher, wie er es erwartet. Er kann alle Links anklicken und der Hauptframe öffnet daraufhin die richtige Seite. Auch das Navigieren mit den “Vor” und “Zurück” Buttons funktioniert tadellos. Aber sobald der Benutzer eine Seite gefunden hat, die er seinen Favoriten hinzufügen möchte fängt der Ärger an. Nicht nur, dass der Name des Lesezeichens oft nur die Domain enthält, viel schlimmer ist, dass das Lesezeichen auch auf die selbige zeigt. Wenn der Besucher also später das Lesezeichen aufruft kommt er nicht auf die gewünschte Seite, sondern auf die Startseite und muss von dort aus erst wieder mühsam auf die richtige Seite navigieren.

Das Suchmaschinen-Problem

Die meisten Suchmaschinen (Google eingeschlossen) haben Probleme mit framebasierten Seiten. Sie sehen oft nur das Frameset-Konstrukt und nicht die Inhalte der einzelnen Frames. Das bedeutet in den meisten Fällen, das eure Internet-Seiten, die tausende von Seiten haben können, bei Suchmaschinen genau EINE Seite als Eintrag enthalten. Und das ist die Startseite oder genauer gesagt das Frameset der Domain. Eine Möglichkeit den Suchmaschinen doch die anderen Seiten mitzuteilen ist das Erstellen einer Sitemap. Diese solltet ihr dann aber manuell den Suchmaschinen mitteilen, da sie die Datei unter umständen auch nicht finden können. Dabei könnt ihr entweder die Domain um die Seitennamen erweitern, oder aber die URL eures Webspace verwenden und um die Seitennamen erweitern.

Die Lösung

Beide Probleme zeigen also, dass Frame-Weiterleitungen ein Relikt aus alten Zeiten sind und nicht mehr verwendet werden sollten. Aber was kann man tun, wenn der Hoster keine HTTP-Weiterleitung bietet, oder dafür einen Aufpreis verlangt? Ganz einfach, man bedient sich eines recht simplen Tricks. Dazu legt man zuerst einen Ordner mit beliebigen Namen auf dem Server an. Dann stellt man die Domain so ein, dass sie als Ziel den Ordner enthält. In diesem Ordner erzeugt man dann eine index.php (oder eine Index-Datei einer andern Scriptsprache) mit folgendem Inhalt:

Dieser einfache JavaScript Snippet ändert die URL des Top-Frame auf einen neuen Wert. Wenn der Besucher also eure Domain aufruft, die lediglich eine Frame-Weiterleitung untersützt, sorgt der Code dafür, dass das oberste Frameset auf eine andere URL umgeleitet wird. Hierbei müsste ihr natrülich “example.com” durch eure eigene Domain ersetzen (das “http://” dabei nicht vergessen). Für alle Besucher, die keine JavaScript Unterstützung aktiviert haben solltet ihr zusätzlich einen NOSCRIPT Tag einfügen der einen Link enthält:

Der Link bekommt dabei das Attribut “traget” mit dem Wert “top”. Somit wird auch hier der Link im obersren Frameset aufgerufen. Um Benutzern, die ein Lesezeichen auf eure umzuleitende Domain haben, könntet ihr auch noch den Request an die Domain anhängen. Somit wird der Besucher dann auf die richtige Zielseite auf der anderen Domain umgeleitet. Zusammengesetzt sieht das ganze Beispiel dann wie folgt aus (oder ähnlich in einer anderen Skriptsprache):

Diesen Codeblock platziert Ihr einfach im BODY Tag der Index-Seite. Dabei solltet ihr aber Besuchern ohne JavaScript eine schönere Seite präsentieren, als eine die nur den Link auf weißem Untergrund enthält.

~~Da ich selbst noch eine Domain besitze, die ich leider zur Zeit noch nicht auf ein aktuelles Hostingpaket umziehen kann, könnt ihr euch das ganze in einem kleinen Beispiel auch ansehen.~~ Die Domain ist mittlerweile endlich umgezogen und daher habe ich nun das Beispiel auf die alte Subdomain abgeändert. Dazu solltet ihr einfach JavaScript vorübergehen deaktivieren, damit ihr auch die Seite und den Quelltext betrachten könnt. Wenn ihr dann JavaScript wieder aktiviert und die Seite aktualisiert, solltet ihr auf meinen Blog umgeleitet werden.

Beispiel

Mit diesem Trick könnt ihr also die Frame-Weiterleitung umgehen, aber ihr präsentiert dann dem Besucher die entsprechend andere URL, als sie aufgerufen haben. Dies sollte aber einer schönen URL aber dafür der eingeschränkten Suchmaschinenfreundlichkeit und der Verhinderung von Lesezeichen bevorzugt werden. Ihr könnt weiterhin die schöne URL in Mails verbreiten und den Besucher trotzdem umleiten. Wenn ihr die Domain vollständig nutzen möchtet bleibt euch leider nichts anderes Möglich, als diese in das Webhosting-Paket zu übertragen oder zu einem reinen Domain-Anbieter zu wechseln, der auch eine HTTP-Weiterleitung anbietet, auch wenn das eventuell einen Aufpreis bedeutet.

Die magische select() Funktion!

Bernhard — Mon, 31 Aug 2009 17:17:16 +0000

Bei meinem vorherigen Post zum Zeilen-Duplizierer stand ich vor dem Problem, dass ich Elemente eines bestimmten Tags innerhalb eines ausgewählten DOM-Elements finden musste. Da ich hierfür in den Utility Methods nicht gefunden habe, musste ich die Funktion getElementsByTagName() verwenden. Alleine hiermit konnte ich aber noch immer nicht auf die Elemente zugreifen. Dazu musste ich den Aufruf noch mit der $A() Funktion verwenden. Der gesamte Aufruf für die drei Formularfelder sah dann wie folgt aus:

$A(newRow.getElementsByTagName('select')).invoke('clear');
$A(newRow.getElementsByTagName('textarea')).invoke('clear');
$A(newRow.getElementsByTagName('input')).each(function(elm){
	elm.clear().checked = '';
});

Heute bin ich durch Zufall dann auf die seit Prototype 1.6 neue Funktion select() gestoßen. Damit konnte ich in einem ersten Versuch die gleiche Selektion mit folgenden Zeilen nachbilden:

newRow.select('select').invoke('clear');
newRow.select('textarea').invoke('clear');
newRow.select('input')).each(function(elm){
	elm.clear().checked = '';
});

Aber selbst diese Vereinfachung ist noch zu umständlich. Die Funktion erlaubt das Selektrieren mit mehreren CSS-Selektoren. Dazu werden die CSS-Selektoren einfach als Parameter der Funktion übergeben:

newRow.select('select', 'textarea', 'input')).each(function(elm){
	elm.clear().checked = '';
});

Diese Vereinfachung ist zwar nicht ganz sinnvoll, da hier auch für Textfelder das “checked” Attribute geleert wird, aber es schadet auch an dieser Stelle nicht weiter.

Wie ihr also sehen könnt bietet die select() Funktion eine sehr einfache Selektion innerhalb eines bereits selektierten Elements. Zusätzlich zu der bereits beschriebenen Funktionalität erweitert die select() Funktion die Elemente zusätzlich noch mit der extend() Funktion um weitere Methoden. Sie einfacht also folgenden Aufruf auf lediglich einen Funktionsaufruf:

// gewöhnlicher Aufruf mit der getElementsByTagName() Funktion
$A(newRow.getElementsByTagName('input')).map(Element.extend);
// gleicher Aufruf mit Hilfe der select() Funktion
newRow.select('input');

Die select() Funktion ermöglicht also im Prinzip das Anwenden der $$() Funktion erweitert um das Zusammenfassen der Elemente in einem Array. Dadurch lässt sich beim Verarbeiten von selektierten Elementen einiges an Mehraufwand einsparen.

Einfacher Zeilen-Duplizierer mit Prototype

Bernhard — Thu, 27 Aug 2009 15:54:47 +0000

Viele standen schon einmal vor dem Problem, dass in einem Formular zu einem Bereich mehrere Eingaben möglich sein sollten. Meist wird dies durch mehrere Text-Felder gelöst, die in einer Tabelle angeordnet sind. Um nun aber dem Benutzer die Möglichkeit zu geben eine weitere Zeile einzufügen musste oft das Formular “abgeschickt” werden, wobei aber der Speicher-Algorithmus umgangen wurde. Anschließend wurde das gesamte Formular neu geladen mit einer neuen Zeile für den entsprechenden Bereich.

Zum Glück sind wir heute wesentlich weiter. Zwar war eine Lösung per JavaScript auch in der Vergangenheit schon möglich, aber durch die Verwendung modernen Frameworks wie Prototype lässt sich das gesamte Problem auf eine Zeile Code reduzieren:

$$('#table tr').last().insert({'after' : this.cloneNode(true)});

Zugegeben, hier werden einige Funktionen in Reihe aufgerufen, aber diese Zeile Code lässt sich ohne weiteres per inline Eventhandler verwenden.

Doch der Reihe nach, was wird mit dieser Zeile eigentlich gemacht? Fangen wir einfach vorne bei der $$() Funktion an. Hier übergeben wir einen CSS-Selektor um alle TR Tags innerhalb der Tabelle mit der ID “table” zu selektrieren und bekommen durch anwenden der last() Funktion die letzte davon ausgewählt. Auf diese Zeile wenden wir nun die insert() Funktion an. Dabei wird die Zeile selbst übergeben und steht über “this” zur Verfügung. Dies machen wir uns zu Nutze und duplizieren die letzte Zeile durch die Funktion cloneNode(). Diese kopierte Zeile wird nun nach der vorherigen eingefügt, was durch die Angabe von “after” angegeben wird.

Da die letzte Zeile kopiert wird, werden auch alle Werte, die sich in Formluarfeldern dieser Zeile befinden mitkopiert. Um dies zu verhindern müssten die Felder zurückgesetzt werden. Das ganze in eine Funktion gepackt und mit zweit Callback-Funktionen erweitert sieht dann wie folgt aus:

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);
}

Wenn im Options Hash der reset Parameter auf true gesetzt wird, werden vor dem Einfügen der neuen Zeile alle Felder zurückgesetzt. Dazu werden die Formular-Elemente mit der select() Funktion ausgewählt und mit Hilfe der each() Funktion wird jede Zeile durch die clear() Funktion zurückgesetzt. Bei Radio-Buttons und Checkboxen werden zusätzlich die “checked” Attribute zurückgesetzt.

Die Funktion kann nun jedem Beliebigen Element zugerdnet werden. Hier bietet sich ein Link, ein SPAN oder ein Bild an:

Zeile hinzufügen

Bei diesem Beispiel-Button wurde der reset Parameter auf “true” gesetzt und zusätzlich der Name einer Callback-Funktion angegeben, die vor dem einfügen aufgerufen wird. Die Callback-Funktion “beforeInsert” bietet sich an, um z.B. LABEL Tags in der einzufügenden Zeile zu ersetzen. Die Callback-Funktion “afterInsert” kann verwendet werden, um z.B. Eventhander oder andere Funktionen einem Element der neuen Reihe zuzuordnen, was besser nach dem einfügen vorgenommen werden sollte. Beide Callbacks erhalten eine Referenz auf die einzufügende Zeile.

Als kleines Beispiel habe ich das Formular aus meinem vorherigen Post etwas umgebaut und die Funktion zum Hinzufügen einer E-Mail-Adresse eingesetzt. Hier das Beispiel und der Quellcode dazu:

Beispiel Download

Hierbei kommt ein sehr viel komplexerer CSS-Selektor zum Einsatz:

Add address

Wie Ihr also seht, könnt ihr die Funktion für beliebige Elemente verwenden, bei denen es Sinn macht, sie zeilenweise zu duplizieren.

Falls ein jQuery-Profi unter euch ist, würde mich eine Lösung in jQuery sehr interessieren. Ich habe leider noch nicht genug Erfahrung darin, um die Funktion ebenfalls in jQuery zu schreiben. Wenn ihr Anmerkungen zur Prototype-Version habt würde mich diese aber auch interessieren.

Formular-Vorschau mit jQuery Thickbox

Bernhard — Thu, 20 Aug 2009 14:46:37 +0000

Für eines meiner Projekte habe ich eine kleine einfache Formular-Vorschau implementiert. Da ich mit dem Ergebnis und der Einfachheit sehr zufrieden bin, möchte ich das Ergebnis hier kurz vorstellen.

Die Vorschau-Funktion nutzt das jQuery Framework und dessen Plugin Thickbox. Der Einsatz von Thickbox stellt aber nur eine Möglichkeit dar, die Vorschau umzusetzen. Im Grunde ist der Aufbau recht simpel. Die JavaScript Funktion setzt das Target und das Action Attribut des Formulars und sendet die Daten an das unter Target angegebene Ziel. Das kann ein neuer Tab sein, oder aber ein iFrame, der wie in dem Beispiel beschrieben in der Thickbox angezeigt wird.

Zur Demonstration habe ich kleines E-Mail-Formular erstellt. Vor dem Absenden kann der Benutzer die zu versendende Mail ansehen. Ich setze die Funktion in einem Loginbereich für ein sehr viel komplexeres Formular ein und verwende für die Vorschau-Funktion auch das Skript, über das die Daten später dem Benutzer ausgegeben werden. Die Vorgehensweise ist aber von der Art und dem Umfang des Formulars unabhängig.

So sieht das kleine Mailformular aus. Natürlich könnte man es noch um die Felder für den Absender und dessen E-Mail-Adresse erweitern, aber es dient wie gesagt nur als Demonstration.

Die einzige Anforderung an das Formular selbst ist eine ID, damit es über die Javascript-Funktion aufgerufen werden kann. Anschließend muss ein Button für die Vorschau eingefügt werden. Dieser sollte am besten ausgeblendet werden, wenn der Nutzer kein JavaScript aktiviert hat.

Das Attribut alt enthält die Parameter für die Thickbox. Zusätzlich muss die CSS-Klasse thickbox zugewiesen werden, um bei einem Klick auf den Button die Thickbox zu aktivieren. Das ID Attribut wird für den Aufruf der JavaScript Funktion durch die click() Funktion von jQuery benötigt. Hier ist natürlich auch ein inline Attribut wie onmousedown möglich, aber das wäre nicht sehr jQuery-Style.

Anschließend aktivieren wir den Eventhandler für den Button zum Aufruf der Vorschau-Funktion:

$('#previewbutton').click(function(){
	formPreview('mailsend', 'mailpreview.php', 'mailpreviewiframe');
});

Der erste Parameter der Funktion steht für die ID des Formular, der zweite für die Seite, die zur Anzeige der Vorschau verwendet wird. Der dritte für das Zeil. Das Ziel kann ein neues Fenster sein, oder aber wie in unserem Fall ein iFrame, der wie folgt an einer beliebigen Stelle im Quelltext definiert wird:

Der Frame steckt in einem DIV, welches ausgeblendet wird. Die ID des DIVs wird für die Thickbox-Parameter verwendet.

Was geschiet nun bei einem Klick auf den Vorschau-Button? Zuerst wird die Thickbox-Funktion ausgeführt und das DIV in die Thickbox verschoben. Mit einer kleinen Verzögerung wird dann der Inhalt des Formulars an den iFrame gesendet, indem das Traget Attribut des Formulars ausgenutzt wird. Um zum Anzeigen der Vorschau eine andere Seite als beim Speichern zu verwenden wird außerdem vor dem Absenden das Action Attribut ausgetauscht und direkt nach dem Absenden wieder auf seinen Ursprungszustand zurückgesetzt.

Da die Vorschau unter Verwendung des späteren Ausgabeseite geschiet, entspricht die Darstellung sehr genau dem späteren Ergebnis. Dazu sollten dann eventuell Daten aus der Datenbank nachgeladen werden oder Werte entsprechend des Speicheralgorithmus verändert werden. Bei komplexen Formularen kann es auch sinnvoll sein, die Daten über die reguläre Speicherfunktion in eine temporäre Tabelle zu speichern, um sie direkt wieder auszulesen. In meinem Projekt lade ich beispielsweise Daten für die ausgewählten SELECT Felder nach und wende die Datenbank-Escape-Funktionen an. Danach füge ich alles zu einer Datenstruktur zusammen, die so auch aus der Datenbank ausgelesen wird und gebe sie mit der Ausgabeseite aus.

Ich hoffe dieses kleine Beispiel zeigt euch, mit welch einfachen Mitteln man eine kleine Vorschau-Funktion umsetzen kann, ohne dabei auf Techniken wie AJAX angewiesen zu sein. Wer auf die Thickbox und jQuery verzichten will, muss lediglich einen inline Eventhandler verwenden und als Target beipsielsweise “_blank” angeben, um die Vorschau in einem neuen Tab/Fenster zu öffnen.

Das Formular kann gerne hier ausprobiert werden. Und keine Angst, es wird dabei in keinem Fall eine Mail versendet! Wer den Quellcode haben möchte, kann ihn auch gerne hier downloaden.

Beispiel Download

Noch ein Wort zum Formular-Design. Da ich nicht gerade die Geduld und die Begabung für schöne Formular habe, wurde für das Beispiel das Niceform 2.0 verwendet. Dieses ist zwar auf JavaScript angewiesen und ersetzt vergebene Klassen, aber ich konnte ohne viel Aufwand schöne Formulare für das Beispiel erzeugen.

Noch ein kleiner Bonustipp: Für Funktionen, die zwingend JavaScript erfodern, sollten diese ausgeblendet werden, wenn der Nutzer kein JavaScript aktiviert hat. Dazu einfach eine CSS-Klasse für solche Elemente verwenden und diese per “display: none” ausblenden. Im Kopfbereich kann dann mit “document.write()” oder den Funktionen der JavaScript-Frameworks die “display” Eigenschaft der CSS-Klasse wieder überschrieben werden. Somit erspart man dem Nutzer ohne JavaScript die unnötigen Klicks und in diesem Beispiel ein versehentliches Absenden, da viele Browser bei deaktiviertem JavaScript alle Buttons automatisch wie Submit-Buttons interpretiert.

Kau-Boy’s AutoCompleter Plugin

Bernhard — Thu, 02 Jul 2009 16:11:34 +0000

Dieses Plugin verwendet den Ajax.Autocompleter von script.aculo.us bzw. die jQuery Autocomplete Funktoin um Beiträge zu finden, die den Suchbegriff im Titel oder Inhaltstext enthalten.

Der eingegebene Text kann in den Titel der Beiträge und/oder im Inhalt gesucht werden. Es kann zusätzlich die Formatierung der Ergebnisse über eine eigene CSS Datei an den Blog angepasst werden. Es kann jeweils der Titel oder zusätzlich ein Teil des Inhalts angegeben werden, wobei hier auch die Länge des auszugebenden Inhaltes eingestellt werden kann.

Installation:

Installation über die WordPress Adminstrator-Seiten:

Gehe zur Admin-Seite Plugins -> Installieren
Suche nach kau-boy und wähle das Plugin aus
Wähle die Aktion Jetzt installieren
Klicke auf Jetzt installieren
Aktiviere das Plugin über den Plugins Menüpunkt in WordPress
Du musst eventuell die Einstellungen anpassen, gerade wenn dein Suchfeld eine andere ID als s hat

Installation unter Verwendung der WordPress Adminstrator-Seiten:

Lade die zip-Datei des Plugins herunter: kau-boys-autocompleter.zip
Gehe zur Admin-Seite Plugins -> Installieren
Wähle den Link Hochladen unter Plugins Installieren Überschrift
Wähle die zip-Datei aus und klicke Jetzt installieren
Aktiviere das Plugin über den Plugins Menüpunkt in WordPress
Du musst eventuell die Einstellungen anpassen, gerade wenn dein Suchfeld eine andere ID als s hat

Installation unter Verwendung von FTP

Lade die zip-Datei des Plugins herunter: kau-boys-autocompleter.zip
Entpacke es und lade es in dein /wp-content/plugins/ Verzeichnis hoch
Aktiviere das Plugin über den Plugins Menüpunkt in WordPress
Du musst eventuell die Einstellungen anpassen, gerade wenn dein Suchfeld eine andere ID als s hat

Screenshots:

Screenshot des Plugins in einem neuen WordPress blog

Screenshot der Einstellungsseite (auch in englisch erhältlich)

Versionsgeschichte:

3.1.2 Zurücksetzen der vorherigen Änderungen, da sie das Problem nicht lösen sondern es eher auslösen
3.1.1 Ersetzen von appendTo() mit prependTo() im jquery.autocompleter plugin zum beheben von Überlagerungs-Problemen
3.1 Ausblenden von PHP Warnungen, wenn WP_DEBUG inaktiv ist und Einfügen des Ergebnis-DIV in den Kopf des BODY Tag
3.0.4 Beheben eines Tippfehlers in der jQuery URL
3.0.3 Beheben eines Tippfehlers im jQuery-Selektor
3.0.2 Retag als 3.0.2 aufgrund eines Deploment-Fehlers im Respository
3.0.1 Schneller bugfix für Prototype CSS und JavaScript
3.0 Einsatz von AJAX, so wie es hier beschrieben wird: http://codex.wordpress.org/AJAX_in_Plugins
2.5 Anpassen das Plugin an WordPress Installationen, bei denen die wp-config.php eine Orderebene über dem ROOT Verzeichnis liegt.
2.4 Fehler mit html Entitäten im Filter beheben
2.3 Fehler des JavaScript in IE8 in Verbindung mit Prototype beheben
2.2 Deaktivieren der Suche für Suchfelder im Adminbereich und Ermöglichen der Verwendung zusammen mit dem relevanssi Plugin
2.1 Hinzufügen einer neuen Version von jQuery Autocomplete
2.0.1 Entfernen von “short open tags”, die auf blogs die Fehler verursachen die “short_open_tag” nicht auf “On” gesetzt haben
2.0 Autocompleter mit mehreren Textfelder auf einer Seite nutzbar machen, verbessern der Kürzung des Inhalt von Artikeln
1.9 Beheben von Problemen mit PHP4, funktioniert nun auch mit qTranslate im “Query-Modus” (?lang=de)
1.8 Hinzufügen der Einstellung für die Länge des Titels und des Inhalts in den Ergebnissen
1.7 Erstzen von jQuery suggest durch jQuery autocomplete, da das suggest Plugin HTML Auszeichnungen zerstört
1.6.1 Verwendung des id Attributs als Standard anstelle des name Attributs
1.6 Hinzufügen der Möglichkeit das Suchfeldes anhand des name Atrrbiuts auszuwählen
1.5.2 Hinzufügen der richtigen Kodierung zu html_entity_decode() um das Zerteilen von XML Enitäten zu verhindern
1.5.1 Fehler im AJAX repsonse behoben, der die Einstellung für die Ergebnisfelder nicht geladen hat
1.5 Hinzufügen Auswahlmöglichkeiten für die Such- und Ergebnisfelder
1.4.1 Aktualisierung der Übersetzungsdatei
1.4 Kombinieren der Styles für jQuery und script.aculo.us, Hinzufügen einer Einstellung zur Multibyte-Kodierung
1.3.5 Fehler bei der html_entity_decode() Konvertierung beseitigt
1.3 Enfternen eines Kommentars in autocompleter.js.php, welcher eine PHP header warning erzeugt hat
1.2 Verwendung von html_entity_decode() um das Zerteilen von Enitäten zu verhindern
1.1 Entfernen von WordPress shortcodes um leere oder falsche Seiten zu verhindern
1.0 Möglichkeit jQuery ODER script.aculo.us zu verwenden, Übersetzen der Einstellungsseite ins Deutsche
0.4 Hinzufügen der Einstellung für die Anzahl der Suchergebnisse und der eigenen CSS Date
0.3 Hinzufügen der Einstellung für die Suchfeld ID
0.2 Erste stabile Version

Wenn dir dieses Plugin gefällt oder dir etwas fehlt, würde ich mich freuen es zu erfahren. Hinterlasse einfach ein Kommentar auf dieser Seiter oder auf meiner WordPress Plugin Seite.