Rechts ist in der Menüleiste eine neue Suchbox zu sehen. Interessant daran sind die Suchvorschläge, die eingeblendet werden sobald ein Buchstabe eingetippt wurde. Da ist kein AJAX im Spiel, sondern ein einfaches Javascript. Die Suchbegriffe für die Dropdown-Box gibt man selbst vor. Das Ganze lässt sich über eine CSS-Datei vielfältig anpassen. Verschiedene Zustände für das Suchfeld sind bereits vorgesehen. Der Einbau ist simpel. Alles weitere im Artikel Style Your Website’s Search Field with JS/CSS. Zum Ausprobieren gleich mal nach rechts schauen oder auf die Abbildung klicken, die zu einer Demo führt:
Original-Demo
14 Antworten zu „Eigene Suche mit mehr Komfort“
— was ist Deine Meinung?
In Zeiten von Web2.0 werden einige User die komplette Ergebnismenge in solchen Feldern erwarten.
Die Folge davon könnte sein das die User frustriert abwandern bevor sie überhaupt „richtig“ suchen.
Wenn man schon eine DB abfragt und Javascript benutzt, dann darf es ja wohl auch AJAX sein 😉
Jeder wie er will…
@Elmar: kommt ganz darauf an, wieviele Begriffe du verwendest. 20.000 müssen es ja nicht unbedingt sein, die Top 100 ist für 80% der Eingaben vermutlich ausreichend.
Ich sehe das, wie Sven, eher als eine Art kleine Tipphilfe und nicht als umfassende Suggest-Lösung.
Ist das nicht geradezu eine Steilvorlage für einen neuen Dr. Web Design Wettbewerb 😉 Vielleicht diesmal erweitert um JS Funktionalität…
Habe wohl falsch getestet: Hatte bei der Eingabe von „c“ eigentlich „css“ erwartet …
Übrigens haben die Webkrauts einen Honigtopf aufgestellt für diejenigen, die nicht rechnen lassen wollen:
http://www.webkrauts.de/index.php?s=honeypot
muss es denn so genau sein? ich hatte das ganze eher als tipphilfe verstanden – soll ja bequeme leute geben… nicht aber im sinne von „suggest“ das ich eher nervig finde weil es bei jedem tastendruck aktiv ist.
naja man könnte das javascript ja manuell / via cronjob (1x pro tag oder so) durch php/… generieren – dann wären die suchworte auch up2date 🙂
@Stevie: Ich las von etlichen interessanten, habe mir die URLs aber nicht notiert, da ich seit einem Jahr eines nutze, das für meine Zwecke gut arbeitet: http://www.brandspankingnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html Es funktioniert mit Ajax und es müssen lediglich die Begriffe (Vorschläge) geliefert werden. Bei mir erledigt das ein Perl-Skript, das eine Datenbank (MySQL) abfragt.
Das obige Skript ließe sich sehr einfach ersetzen, indem die Vorschläge z.B. in eine separate Textdatei geschrieben werden, deren Inhalt unverändert geliefert wird. Mit mehreren Dateien können auf der gleichen HTML-Seite verschiedene Felder befüllt werden, da (beliebig) viele Objekte erzeugt werden können. Das Aussehen wird über CSS bestimmt. Funktioniert auch mit Safari (weitere Tests: IE 6, 7, Firefox, Opera).
@David Große Content-Mengen, die direkt im JavaScript stehen, werden beim Aufruf der HTML-Seite mit geladen. Bei 20.000 Begriffen mit im Schnitt 10 Buchstaben wären das bei ISO-8859-1 etwa 200 KB nur für das Skript. Da ist Ajax, das nur bei Bedarf nur das Sinnvolle liefert, erheblich schneller. Bei meiner Datenbankabfrage werden z.B. 10 Begriffe ab einer Eingabe von 2 Zeichen geliefert. Die Anzahl lässt sich in einer externen Konfigurationsdatei einstellen, aber sehr lange Listen machen wenig Sinn, der Benutzer soll durch mehr Eingabe die Liste einschränken.
Ich sehe gerade bei großen Contentmengen einen Sinn in diesem Skript. Auch für Volltextsuchen ist eine Vorschlagsfunktion mit Ajax nur wenig geeignet.
Ich kann mir gut vorstellen, das Script z.B. mit den häufigsten Suchbegriffen aus den Server-Logfiles zu füttern. Das ginge per Hand oder über serverseitige Programmierung (z.B. PHP). So bleiben die Vorteile des Scriptes erhalten und es liefert relevante Suchvorschläge.
Also bei mir läuft sowohl die Downloadversion wie auch die Beispiel-Online Version nicht.
Vorteil des Suchscriptes:
Es ist verdammt schnell, da die Suchbegriffe nicht erst via Ajax aus der Datenbank geholt werden müssen, sondern direkt im Quelltext liegen.
Nachteil:
Wenn ich einen Teil eines Suchbegriff in eine Suchbox eingebe und mir wird der Rest des von mir gesuchten Begriffs nicht angezeigt, dann gehe ich davon aus, dass es zu meinem Begriff nichts gibt und so spare ich mir den Druck auf die Enter-Taste.
Von der Wartbarkeit mal ganz abgesehen.
Also eigentlich eher eine Spielerei. Bei großem Content eher sinnfrei.
Und wo gibt es ein solches Script?
Das Skript ist sehr unflexibel, da alle Vorschläge in einem hartkodiertem String im JavaScript stehen. Zumindest in der HTML-Datei sollte dieser String redefiniert werden können (? kenne mich mit JavaScript nicht aus), dann eignete es sich wenigstens als Ausfüllhilfe für Formularfelder, die begrenzte feste Vorgaben enthalten sollen (Bundesland, Geschlecht, …).
Eine Suche sollte dynamisch den Inhalt berücksichtigen und Vorschläge aus der Suchdatenbank liefern. Hierzu gibt es bessere Skripte. Feste Suchstrings sind unpraktikabel, mein Site hat z.B. an die 20.000 verschiedene Wörter, was inakzeptable Ladezeiten bedeutete. D.h.: Suche nein, Ausfüllhilfe für bestimmte Formularfelder ja, falls die Vorschlags-Variable dynamisch in der HTML-Datei redefiniert werden kann.
Wer beides will, nimmt ein flexibles Skript, das nur einmal geladen werden muss und alle Wünsche berücksichtigt (Suggest bei Suche, Ausfüllen von Formularfeldern).
Firefox gibts auch für Mac und is auch besser.
Hmmm eigentlich schön. Funktioniert aber nicht mit dem Safari. 🙁