Suchvorschläge mit datalist

[blito]

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>

 

[blito]

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>

 

[blito]

Vielen herzlichen Dank, für die nette Unterstützung.Du hast mir seht geholfen.

 

[blito]

Ja, es hat funktioniert.
Lg