Suchvorschläge mit datalist

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

blito

Neues Mitglied
9 September 2020
4
0
1
19
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>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.998
377
83
67
Weise jeder Option die URL, auf die weiter geleitet werden soll, als data-Attribut zu. Dann kannst Du nach der Auswahl die URL durch Javascript ermitteln und aufrufen:
Code:
    <form action="#">
        <p>
            <label>
                Vogelart
                <input type="search" list="Voegel">
                <datalist id="Voegel">
                    <option data-url="amsel.html" 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

Neues Mitglied
9 September 2020
4
0
1
19
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>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.998
377
83
67
Hm, wenn ich deinen Code 1-zu-1 in meine Testseite übernehme, funktioniert es bei "Amsel" einwandfrei. Möglicher Weise liegt das Problem darin, dass ein <button> defaultmäßig vom Typ "submit" ist. Versuche dies:
<button type="button" id="find">finden!</button>
 
Werbung: