Mittels JavaScript in einem Dropdown-Menü suchen und auswählen

Scripting-Tipps - JavaScript


Sie kennen das sicher: Da sind Sie dabei, ein Formular auszufüllen und müssen aus einer Dropdown-Liste einen bestimmten Eintrag heraussuchen (beispielsweise das Land, in dem Sie wohnen). Wenn die Liste nicht alphabetisch geordnet ist, kann dies bei längeren Dropdown-Listen zu einer reinen Qual werden. Die Abhilfe für das lange Suchen schafft ein JavaScript. Mit diesem JavaScript können Sie über ein normales Textfeld in einer Dropdown-Liste einen bestimmten Eintrag suchen lassen, der dazu auch noch automatisch ausgewählt wird. An Komfort kaum zu überbieten.

Wie das funktioniert, erfahren Sie anhand des folgenden Beispiels.


Beispiel:

<html>
<head>
<script language="JavaScript">
<!--
function Eingabe(Wert)
{
    for(i = 0; i < document.getElementById('Autohersteller').options.length; i++)
    {
        if(Wert.substr(0, Wert.length).toLowerCase() == document.getElementById('Autohersteller').options[i].value.substr(0, Wert.length).toLowerCase() && Wert.length != 0)
        {
            document.getElementById('Autohersteller').options[i].selected = true;
            break;
        }
    }
}
//-->
</script>
<title>Mittels JavaScript in einem Dropdown-Menü suchen und auswählen</title>
</head>
<body>

<input name="Hersteller" onKeyUp="Eingabe(this.value);" type="text"><br>
<select id="Autohersteller" size="5">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Citroen">Citroen</option>
<option value="Daewoo">Daewoo</option>
<option value="Excalibur">Excalibur</option>
<option value="Fiat">Fiat</option>
<option value="Geely">Geely</option>
<option value="Hyundai">Hyundai</option>
<option value="Isuzu">Isuzu</option>
<option value="Jaguar">Jaguar</option>
<option value="Kia">Kia</option>
<option value="Lamborghini">Lamborghini</option>
<option value="Maserati">Maserati</option>
<option value="Nissan">Nissan</option>
<option value="Opel">Opel</option>
<option value="Porsche">Porsche</option>
<option value="Qvale">Qvale</option>
<option value="Rolls-Royce">Rolls-Royce</option>
<option value="Saab">Saab</option>
<option value="Toyota">Toyota</option>
<option value="UAZ">UAZ</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Walter">Walter</option>
<option value="X-Firma">X-Firma</option>
<option value="Y-Firma">Y-Firma</option>
<option value="Zotye">Zotye</option>
</select>

</body>
</html>


Erläuterung:
Kopieren Sie dieses Beispiel in ein neues HTML-Dokument und geben Sie in das Textfeld einfach mal ein "Y" ein. Schon landen Sie in der Dropdown-Liste automatisch bei dem Eintrag "Y-Firma". Natürlich funktioniert dies auch bei Listen, in denen der gleiche Anfangsbuchstabe mehrmals vorkommt. Gibt der Benutzer weitere Buchstaben in das Textfeld ein, versucht das JavaScript genauere Übereinstimmungen zu finden und springt anschließend automatisch dort hin.



Weitere Artikel: