Suchfeld pimpen

Ich habe oben rechts (1) das Suchfeld für den Safari-Browser gepimpt. Bedingt läuft das auch im Firefox. Alle anderen sehen ein „normales“ Suchfeld.

Suchfeld

Mit Klick auf die kleine Lupe (2) auf der linken Seite werden die letzten fünf Suchbegriffe zur Schnellauswahl angezeigt.

Suchfeld

Während der Eingabe eines Suchbegriffes kann das Feld wieder gelöscht/geleert werden, wenn man auf das kleine Kreuz (3) auf der rechten Seite klickt.

Suchfeld

Aber wie funktioniert das?

Gefunden habe ich Infos dazu bei Dave Hyatt. Das Formularfeld für die Suche wird durch
erzeugt. Hinzu kommen die folgenden Attribute:

  • für den grauen Hinweistext (Finden…) placeholder="Finden..."
  • autosave="stm_search" als Name für die Suchergebnisse
  • und results="5" um anzugeben, wie viele Suchwörter in der Liste gespeichert und angezeigt werden sollen.

Natürlich können auch die bekannten input-Attribute verwendet werden (size, maxlenghth, etc.).

Ich habe keinerlei CSS-Formatierungen für die Lupe, das Kreuz oder die runden Enden des Feldes erstellt. Das interpretiert Safari selbstständig so, durch die Angabe „search“ als Feld-Typ. Im Firefox wird ebenfalls eine Lupe auf der linken Seite des Feldes angezeigt, die – wenn man darauf klickt – auch die letzten Suchbegriffe anzeigt.

Übrigens ist die Suche hier nun über den Access-Key „F“ erreichbar (ctrl+f bzw. alt+f) und während der Eingabe wird schon eine Livesuche angestossen. Einfach einen Moment warten und schon öffnet sich eine Liste mit den Suchergebnissen.

Stefan Moeller Verfasst von:

Ein Kommentar

  1. 14. Juni 2008
    Antworten

    Das einzige Problem an dieser an sich netten Methode ist, daß in xhtml das Attribut ‚type‘ des Input-Elements den Wert ’search‘ nicht akzeptiert und es dort auch die anderen Attribute (autosave, incremental, results) nicht gibt und insofern eine Seite, die diesen Hack enthält, nicht valide ist: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.stefanmoeller.com%2F2007%2F10%2F12%2Fsuchfeld-pimpen%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.