Google Suggest mit der HTML5 Datalist nachbauen

Puh – nach gefühlten Ewigkeiten mal wieder ein Blogartikel von mir. Eigentlich schade, da viele Artikel mittlerweile richtig gut ranken und gute Besucherzahlen über die organische Suche anziehen; ich das Potential des Blogs durch neue Artikel aber nicht voll ausschöpfen kann. Heute morgen hatte ich dann mal wieder richtig Lust, einen Screencast zu produzieren und ein Thema war natürlich auch schnell gefunden.

Ich versuche natürlich, die beiden Themen Webentwicklung und Online-Marketing (auf Grund meiner persönlichen Passion) auf diesem Blog mehr zu verschmelzen. Das heutige Thema passt deshalb gut: Zum einen widmen wir uns der Google Suggest REST API und schauen uns an, wie man sehr simpel zu jedem Keyword eine XML-Liste mit relevanten Suchvorschlägen erhält. Zum anderen beziehen wir das neue HTML5 datalist-Element mit ein, um die automatisierte Ausgabe so simpel und praktikabel wie möglich zu gestalten.

Film ab

Bitte beachtet, dass bei Veröffentlichung dieses Artikels nur Mozilla Firefox und Opera in der Lage waren, das HTML5 datalist-Element korrekt zu verarbeiten. In Google Chrome hält es vermutlich ab Version 20 Einzug.

Der verwendete Quellcode

Natürlich möchte ich euch den verwendete Quellcode nicht vorenthalten.

index.php

data.php

Wie immer freue ich mich auf eure Kommentare, Verbesserungen und Anregungen :-)

Dieser Artikel wurde am 30.05.2012 veröffentlicht