搜索下拉

Question

我有這樣的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> 

我需要搜索使用JavaScript槽它。 這是我現在有：

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

的代碼不能正常工作，而且它可能不是最好的。

任何人都可以告訴我如何搜索槽下拉項目，當我打回來找到我想要的一個，如果我再次進入輸入給我下一個結果，使用普通的JavaScript？

Answer 1

這裏是固定的代碼。它僅搜索第一個匹配項：

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

您不應該檢查for循環之外的空文本。 此外，此代碼將執行部分匹配，即如果您鍵入「A」，它將選擇「Artikkelarkiv」選項。

Answer 2

蝙蝠的權利，因爲你選擇的下拉錯誤代碼將無法正常工作：

document.getElementById("basic-combo") 

是錯誤的，因爲該ID是select，而「基本-組合」是名稱屬性。

而另一個要注意的是，你有兩個變量名爲output。儘管它們處於不同的範圍，但它可能會變得混亂。

Answer 3

對於像這樣的東西，我建議你使用像jQuery（http://jquery.com）這樣的JavaScript庫來使DOM交互更容易和跨瀏覽器兼容。

然後，您可以選擇並遍歷所有從你的選擇是這樣的元素：

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