搜索下拉

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