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

In Formularen gibt es häufig ein Drop-down-Menü, aus dem man einen bestimmten Eintrag auswählen muss. Das kann bspw. das Land sein, in dem man wohnt. Du kennst sicherlich solche Listen auch. Ist die Liste dabei jedoch nicht alphabetisch sortiert, ist die Suche nach dem richtigen Eintrag die reinste Qual.

Die Abhilfe für das lange Suchen schafft ein JavaScript. Mit diesem Script kannst du mit einem normalen Textfeld einen Eintrag im Drop-down-Menü suchen. Dabei wählt das Script den Eintrag auch noch automatisch aus. Das ist an Komfort wohl kaum zu überbieten.

 

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

Wie das funktioniert, zeige ich dir 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>

 

Erklärung:

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. Anschließend springt es auch automatisch dort hin.

 


Dir gefällt dieser Artikel?

3 Gedanken zu „Drop-down-Menü: Einträge suchen und auswählen

  • 11. August 2017 um 00:40
    Permalink

    Das ist eine schöne Lösung. Gibt es diese auch für Einträge die aus einer Datenbank kommen? Ich habe eine Liste mit ca 800 Einträgen. die kann ich unmöglich ins HTML schreiben.

    Antwort
    • 11. August 2017 um 06:22
      Permalink

      In diesem Beispiel bezieht sich das Script ja auf ein ganz normales Drop-down Formular. Wenn du dein Drop-down Formular aus einer Datenbank generierst, wird ja am Ende das gleiche auf deiner Website angezeigt – nur eben automatisiert und nicht händisch.

      Theoretisch sollte es also mit einer kleinen Anpassung des Scripts, welches das Formular erzeugt, also machbar sein indem du das JS einfach hinzufügst.

      Antwort
      • 11. August 2017 um 10:46
        Permalink

        Danke für die schnelle Antwort. Ich fürchte nur ganz so einfach wird es nicht sein. Werde es mal versuchen.

        Antwort

Schreibe einen Kommentar

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