Drop-down-Menü: Einträge suchen und auswählen

Du kennst das sicher: Du bist dabei, ein Formular auszufüllen und musst aus einem Drop-down-Menü einen bestimmten Eintrag heraussuchen (beispielsweise das Land, in dem du wohnst). Wenn die Liste nicht alphabetisch geordnet ist, kann dies bei längeren Drop-down-Listen zu einer reinen Qual werden.

Die Abhilfe für das lange Suchen schafft ein JavaScript. Mit diesem JavaScript kannst du über ein normales Textfeld in einer Drop-down-Liste einen bestimmten Eintrag suchen lassen, der dazu auch noch automatisch ausgewählt wird. An Komfort kaum zu überbieten.

 

Wie das funktioniert, zeige ich dir anhand des folgenden Beispiels.

 

Code-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:

Kopiere dieses Beispiel in ein neues HTML-Dokument und gebe in das Textfeld einfach mal ein „Y“ ein. Schon landest du in der Drop-down-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.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.