Suchleiste in HTML mit Link?
Ich habe schon diese Suchleiste bzw. Auflistung:
<div align="right"><form>
<input type="search" list="Suche">
<datalist id="Suche">
<option value="Musikbox">
<option value="Kopfhörer">
<option value="">
</datalist>
</form>
</div>
wie schaffe ich es wenn ich diesen Code im Browser ausführe das wenn man in die Suchleiste Musikbox eingibt und Die Musikbox erscheint das man dort raufklicken kann und mit einem Link weitergeleitet wird?
1 Antwort
Das kann man mit JavaScript lösen. Das Formular kann hierbei in Kombination mit einem Button die Verlinkung übernehmen. Je nach Eingabe braucht lediglich dessen action-Attribut gesetzt werden. Zusätzlich kann man noch den Buttonstatus ändern.
Zuerst müsste also der Button ergänzt werden und die relevanten Elemente (Formular, Eingabefeld, Button) benötigen ein id-Attribut, damit man sie anschließend im DOM finden kann.
<div style="text-align:right">
<form id="search-form">
<input id="search-field" list="Suche" type="search">
<datalist id="Suche">
<option value="Musikbox" data-url="...">
<option value="Kopfhörer" data-url="...">
<option value="">
</datalist>
<button id="search-button" disabled>Go to</button>
</form>
</div>
Die einzelnen Listenoptionen hingegen erhalten ein data-url-Attribut, welches assoziativ zum jeweiligen Begriff auf die richtige Ziel-URL verweist.
An der Stelle habe ich gleich noch einen Fehler behoben: Das align-Attribut gehört nicht zum HTML5-Standard. Die Rechtsausrichtung des Formulars gelingt via CSS (text-align-Property).
Das Skript muss nun die oben benannten, relevanten Elemente finden. Dazu gehören ebenso alle Optionen der Datenliste.
const form = document.getElementById("search-form");
const field = document.getElementById("search-field");
const button = document.getElementById("search-button");
const options = document.querySelectorAll("[data-url]");
Dem Eingabefeld kann anschließend ein Event Handler zugeordnet werden, der auf Eingaben reagiert. In ihm wird initial der Button erst einmal deaktiviert. Eingaben ab einer bestimmten Zeichenlänge können zudem ignoriert werden, die von mir gewählte Zahl sollte auf die Mindestzeichenanzahl aus deiner tatsächlichen Wörterliste angepasst werden
field.addEventListener("input", () => {
button.setAttribute("disabled", "");
if (field.value.length < 3) return;
for (const option of options) {
if (field.value === option.value) {
form.action = option.dataset.url;
button.removeAttribute("disabled");
break;
}
}
});
Die Schleife geht im Anschluss über die Optionen und schaut, ob einer dieser Werte aktuell im Eingabefeld steht. Wenn ja, wird der Buttonstatus aktualisiert und der Wert des jeweiligen data-url-Attributs als neues Formularziel festgelegt.
Du kannst die Wertprüfung verlagern und stattdessen serverseitige Redirects einrichten.
Das Formular braucht wie gehabt noch den zusätzlichen Button und das action-Attribut sollte auf einen Request Handler zeigen. Das Eingabefeld braucht zudem ein name-Attribut.
Beispiel:
<form action="/search">
<input name="query" list="Suche" type="search">
<!-- ... -->
Wenn das Formular via Buttonklick abgeschickt wird, wird der Wert des Eingabefelds automatisch als Queryparameter an die URL gehängt (/search?query=Eingabe). Ein Redirect sollte folglich dann stattfinden, wenn die URL einem bestimmten Muster (z.B. /search?query=Musikbox) entspricht. Andernfalls sollte auf die Seite mit dem Formular zurückgeleitet werden.
Wie die konkrete Implementation der Redirects aussieht, ist nun abhängig von dem Webserver, der deine Webseite ausspielt. Bei einem Apache HTTP Server beispielsweise kann man Redirects über die htaccess-Datei regeln.
Beispiel:
RewriteEngine On
RewriteCond %{REQUEST_URI} ^/search$ [NC]
RewriteCond %{QUERY_STRING} ^query=Musikbox$ [NC]
RewriteRule . /Musikbox.html [L]
RewriteCond %{REQUEST_URI} ^/search$ [NC]
RewriteCond %{QUERY_STRING} ^query=.*$ [NC]
RewriteRule . /backToPageWithForm.html [L]
Statt mit einer Konfigurationsdatei, kann ebenso eine serverseitige Webanwendung die Weiterleitung übernehmen.
Beispiel mit PHP (/search.php):
<?php
$query = isset($_GET['query']) ? $_GET['query'] : '';
switch ($query) {
case 'Musikbox':
header('Location: /Musikbox.html');
exit;
/* other cases ... */
default:
header('Location: /backToPageWithForm.html');
exit;
}
und geht das auch ohne JavaScript also nur mit dem link