Suchfunktion auf Homepage

[Gunnar Bittersmann]

@@Gerhard

Gesucht werden soll nur auf der aktuellen Seite.

Ich nehme an, du meinst auf der aktuellen Website. Wie dedlfix schon anmerkte, verfügen Browser ja bereits über eine Suche auf der aktuellen Seite.

Weiterhin nehme ich an, dass du eine Suche nicht selber programmieren willst, sondern eine Suchmaschine auf deiner Website suchen lassen willst.

Und schon haben wir ein kleines Problem: Verschiedene Nutzer verwenden verschiedene Suchmaschinen. Ich lasse mich ungern ausspionieren und mache einen großen Bogen um Google. Aber an die im Browser der jeweiligen Nutzerin eingestellte Suchmaschine kommt man wohl nicht ran. (Oder kann man die mit JavaScript irgendwie auslesen?) Also nehmen wir DuckDuckGo für alle – und tun allen damit einen Gefallen.

Das Eingabenfeld für die Suchbegriffe sollte den Namen q haben, damit beim Absenden der von DuckDuckGo erwartete Parameter q draus wird. Für die Angabe der Website(s) brauchen wir noch ein Eingabefeld namens sites – type="hidden", da das ja nicht zu sehen sein soll, sondern nur der Übermittlung des Parameters dient, der dort als value drinsteht.

Sieht dann so aus: herbstliches Beispiel.

<form role="search" action="https://duckduckgo.com/">
	<input name="q" type="search" aria-label="Suche auf gunnarbittersmann.de"/>
	<input name="sites" type="hidden" value="gunnarbittersmann.de"/>
	<button>Suchen</button>
</form>

Bei dir steht dann natürlich nicht gunnarbittersmann.de – weder als value noch im aria-label (welches blinde Screenreader-Nutzer erkennen lässt, wozu dieses Formular dient).

(Das JavaScript im Codepen entfällt; das dient nur der Vorbelegung mit einem Beispielwert und dem Setzen von target="_blank" wegen Codepen, was man aber normalerweise nicht tun sollte!)

😷 LLAP