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，而“basic-combo”是name属性。

另外需要注意的是，你有两个名为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
});

搜索下拉列表

3 个答案: