Suche einer Drop-Down-

Question

Ich habe dieses HTML-Drop-Down-:

<form> 
    <input type="text" id="realtxt" onkeyup="searchSel()"> 
    <select id="select" name="basic-combo" size="1"> 
    <option value="2821">Something </option> 
    <option value="2825">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Something </option> 
    <option value="2842">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Something </option> 
    <option value="2843">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_Something </option> 
    <option value="15999">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_Something </option> 
    </select> 
</form> 

Ich brauche es zu suchen Trog Javascript. Das ist, was ich habe jetzt:

function searchSel() { 
    var input=document.getElementById('realtxt').value.toLowerCase(); 
    var output=document.getElementById('basic-combo').options; 
    for(var i=0;i<output.length;i++) { 
     var outputvalue = output[i].value; 
     var output = outputvalue.replace(/^(\s|&nbsp;)+|(\s|&nbsp;)+$/g,""); 
    if(output.indexOf(input)==0){ 
     output[i].selected=true; 
     } 
    if(document.forms[0].realtxt.value==''){ 
     output[0].selected=true; 
     } 
    } 
} 

Der Code funktioniert nicht, und es ist wahrscheinlich nicht die beste.

Kann mir jemand zeigen, wie ich durch die Drop-Down-Elemente suchen kann und wenn ich eintrage, finde die, die ich will, und wenn ich wieder gebe, gib mir das nächste Ergebnis mit plain javascript?

Answer 1

Hier ist der feste Code. Es sucht nach dem ersten Vorkommen nur:

function searchSel() { 
    var input = document.getElementById('realtxt').value; 
    var list = document.getElementById('select');   
    var listItems = list.options; 

    if(input === '') 
    { 
     listItems[0].selected = true; 
     return; 
    } 

    for(var i=0;i<list.length;i++) { 
      var val = list[i].value.toLowerCase(); 
      if(val.indexOf(input) == 0) { 
      list.selectedIndex = i; 
       return; 
      } 
    } 
} 

Sie nicht für leeren Text außerhalb der for-Schleife überprüfen sollen. Auch dieser Code wird teilweise übereinstimmen, d. H. Wenn Sie 'A' eingeben, wird die Option 'Artikkelarkiv' ausgewählt.

Answer 2

Recht der Fledermaus, wird Ihr Code nicht funktioniert, wie Sie die Drop-down irren Auswahl:

document.getElementById("basic-combo") 

falsch ist, wie die ID select ist, während „basic-Combo“ der Attributname ist .

Und eine andere Sache zu beachten ist, dass Sie zwei Variablen mit dem Namen output haben. Obwohl sie sich in verschiedenen Bereichen befinden, kann es zu Verwirrung führen.

Answer 3

Für solche Sachen würde ich vorschlagen, dass Sie eine JavaScript-Bibliothek wie jQuery (http://jquery.com) verwenden, um die DOM-Interaktion einfacher und browserübergreifend zu machen.

Dann können Sie auswählen und durchqueren alle Elemente von Ihrem wählen wie folgt aus:

$("#select").each(function() { 
    var $this = $(this); // Just a shortcut 
    var value = $this.val(); // The value of the option element 
    var content = $this.html(); // The text content of the option element 
    // Process as you wish 
});