Rechercher un menu déroulant

Question

Je cette liste déroulante HTML:

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

Je dois chercher creux à l'aide de javascript. Ce est ce que j'ai maintenant:

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; 
     } 
    } 
} 

Le code ne fonctionne pas, et il est sans doute pas le meilleur. Quelqu'un peut-il me montrer comment je peux chercher dans les éléments de liste déroulante et quand j'appuie sur enter, trouve celui que je veux, et si je tape à nouveau, donnez-moi le résultat suivant, en utilisant javascript simple?

Answer 1

Voici le code fixe. Il recherche uniquement la première occurrence:

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; 
      } 
    } 
} 

Vous ne devez pas rechercher de texte vide en dehors de la boucle for. En outre, ce code fera une correspondance partielle, c'est-à-dire si vous tapez 'A', il sélectionnera l'option 'Artikkelarkiv'.

Answer 2

Droit de la chauve-souris, votre code ne fonctionnera pas comme vous choisissez le mauvais déroulant:

document.getElementById("basic-combo") 

est faux, comme l'id est select, alors que « combo de base » est l'attribut name .

Et une autre chose à noter, c'est que vous avez deux variables nommées output. Même s'ils sont dans des portées différentes, cela peut devenir confus.

Answer 3

Pour ce genre de choses, je vous suggère d'utiliser une bibliothèque JavaScript comme jQuery (http://jquery.com) pour faciliter l'interaction DOM et la compatibilité entre navigateurs.

Ensuite, vous pouvez sélectionner et parcourir tous les éléments de votre sélection comme celui-ci:

$("#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 
});