Question

我不想使用JQuery。 Here是一段简单的javascript，可以让您搜索下拉菜单列表：

<HTML><HEAD><SCRIPT type="text/javascript">
function searchSel() {
  var input=document.getElementById('realtxt').value.toLowerCase();
  var output=document.getElementById('realitems').options;
  for(var i=0;i<output.length;i++) {
    if(output[i].value.indexOf(input)==0){
      output[i].selected=true;
    }
    if(document.getElementById('realtxt').value==''){
      output[0].selected=true;
    }
  }
}
</SCRIPT></HEAD><BODY>
<FORM>
Search <input type="text" id="realtxt" onkeyup="searchSel()">
<SELECT id="realitems">
<OPTION value="">Select...
<OPTION value="afghanistan">Afghanistan
<OPTION value="albania">Albania
<OPTION value="algeria">Algeria
<OPTION value="andorra">Andorra
<OPTION value="angola">Angola
</SELECT>
</FORM></BODY></HTML>

问题在于，为了使其工作，每个选项的值必须包含文本。我尝试将javascript代码中的“value”字段更改为“name”，以便它只搜索名称，但不会搜索。我的选项字段有数字，我不能轻易将它们转换为名称。有没有办法调整这个javascript以使用名称或更好地搜索选项标签？

Answer 1

使用此代码，我已将“value”替换为“innerHTML”

 function searchSel() {
                var input = document.getElementById('realtxt').value.toLowerCase();
                var output = document.getElementById('realitems').options;
                for (var i = 0; i < output.length; i++) {
                    if (output[i].innerHTML.indexOf(input) == 0) {
                        output[i].selected = true;
                    }
                    if (document.getElementById('realtxt').value == '') {
                        output[0].selected = true;
                    }
                }
            }

Answer 2

这一行：

var input=document.getElementById('realtxt').value.toLowerCase();

输入一个字符串。

<OPTION value=1>text

value是一个integer.String永远不会==整数。变化

if(output[i].value.indexOf(input)==0) to

到

if((output[i].value.indexOf(input)==0) || (output[i].value.indexOf(parseInt(input)))

Answer 3

您需要在行中更改两件事

if(output[i].value.indexOf(input)==0){

在<option> elements使用.text属性而不是.value。
将其设为小写以匹配小写输入。使用小写value属性和数字，您没有遇到此问题。

这个脚本就是结果：

function searchSel() {
  var input = document.getElementById('realtxt').value.toLowerCase(),
      len = input.length,
      output = document.getElementById('realitems').options;
  for(var i=0; i<output.length; i++)
    if (output[i].text.toLowerCase().slice(0, len) == input)
      output[i].selected = true;
  if (input == '')
    output[0].selected = true;
}

_{我也使用了improved startswith check。}

更改有效的现有脚本

3 个答案: