Javascript 搜索下拉列表

我有一个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;
      }
  }
}

函数searchSel（）{
var input=document.getElementById（'realtxt'）.value.toLowerCase（）；
var output=document.getElementById（'basic-combo'）。选项；
对于bat右侧的（var i=0；i），您的代码将无法工作，因为您选择的下拉列表错误：

document.getElementById("basic-combo")

错误，因为id是
选择
，而“basic combo”是name属性

另外需要注意的是，您有两个名为
output
的变量。即使它们在不同的范围内，也可能会产生混淆。
在bat右侧，您的代码将无法工作，因为您选择的下拉列表错误：

document.getElementById("basic-combo")

错误，因为id是
选择
，而“basic combo”是name属性

另外需要注意的是，您有两个名为
output
的变量。即使它们在不同的范围内，也可能会引起混淆。
这是固定的代码。它只搜索第一个出现的变量：

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

函数searchSel（）{
var input=document.getElementById（'realtxt'）.value；
var list=document.getElementById（'select'）；
var listItems=list.options；
如果（输入==''）
{
listItems[0]。选定项=true；
返回；
}
对于（var i=0；i这是固定的代码。它只搜索第一次出现的代码：

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

函数searchSel（）{
var input=document.getElementById（'realtxt'）.value；
var list=document.getElementById（'select'）；
var listItems=list.options；
如果（输入==''）
{
listItems[0]。选定项=true；
返回；
}
对于（var i=0；i对于类似的内容，我建议您使用jQuery（）之类的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
});

对于这类内容，我建议您使用jQuery（）之类的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
});

实际上，它选择了与输入文本匹配的最后一个选项。我如何才能选择它匹配的第一个选项？我如何使用Enter键转到下一个匹配？实际上，它选择了与输入文本匹配的最后一个选项。我如何才能选择它匹配的第一个选项？我如何使用Enter键转到下一个匹配？可以吗您提供了一个使用jQuery搜索下拉列表的示例？您可以提供一个使用jQuery搜索下拉列表的示例吗？