• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Suchvorschläge mit datalist

blito

Neues Mitglied
Hallo, ich bin Anfänger und hätte eine Frage, ich habe folgenden Code gefunden für eine Suchfunktion mit suchvorschlägen mit datalist gefunden.
Meine Frage: wie kann ich jeden einzelnen vogel zu einer Website unabhängig von einander weiterleiten lassen?

<form action="#">
<p>
<label>
Vogelart
<input type="search" list="Vögel">
<datalist id="Vögel">
<option value="Amsel">
<option value="Buntspecht">
<option value="Drossel">
<option value="Eisvogel">
<option value="Fink">
<option value="Graugans">
<option value="Meise">
<option value="Spatz">
<option value="Specht">
</datalist>
</label>
<button>finden!</button>
</p>
</form>
 
Werbung:
Ok,Vielen Dank. Aber bei mir geht es nicht.Mache ich irgendetwas falsch? Ich habe jetzt bei der Amsel mal Google verlinkt und es wird nicht angezeigt?(Ich bin , wie gesagt, absoluter Anfänger):


<form action="#">
<p>
<label>
Vogelart
<input type="search" list="Voegel">
<datalist id="Voegel">
<option data-url="https://www.google.com/" value="Amsel"></option>
<option data-url="buntspecht" value="Buntspecht"></option>
<option data-url="drossel.html" value="Drossel"></option>
<option data-url="eisvogel.html" value="Eisvogel"></option>
<option data-url="fink.html" value="Fink"></option>
<option data-url="graugans.html" value="Graugans"></option>
<option data-url="meise.html" value="Meise"></option>
<option data-url="spatz.html" value="Spatz"></option>
<option data-url="specht.html" value="Specht"></option>
</datalist>
</label>
<button id="find">finden!</button>
</p>
</form>
<script>
document.getElementById('find').addEventListener('click', event => {
const val = document.querySelector('input[type="search"]').value;
const opt = document.querySelector('#Voegel option[value=' + val + ']');
if (opt) {
const url = opt.dataset['url'];
document.location = url;
} else {
alert('Bitte wähle einen Vogel aus');
}
});
</script>
 
Werbung:
Zurück
Oben