在下拉菜单中搜索工作代码

时间:2014-01-13 07:20:34

标签: javascript drop-down-menu

有人曾帮我解决这个问题,但有一个问题,我已经关闭了这个问题。我不想使用JQuery。以下代码有效,它允许您搜索下拉菜单:

<html>
  <head>
    <script type="text/javascript">
    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;
    }
    </script>
  </head>
  <body>
    <form>
      search <input type="text" id="realtxt" onkeyup="searchSel()">
      <select id="realitems">
        <option value="">select...</option>
        <option value="1">Power hungry</option>
        <option value="2">Super man</option>
        <option value="3">Hyperactive</option>
        <option value="4">Bored</option>
        <option value="5">Human</option>
      </select>
    </form>
  </body>
</html>

这是问题所在。

仅限于匹配第一个单词的首字母。因此,如果您为超级男子输入Super,它就会奏效。但如果您使用Man键入,则无法显示。有没有办法让它匹配整个字符串的匹配值?感谢。

1 个答案:

答案 0 :(得分:7)

我创造了一个小提琴请检查。 http://jsfiddle.net/wLzs4/3/

我已经为你的情况使用了indexOf javascript函数。

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().indexOf(input) != -1 ){
          output[i].selected = true;
              break;
          }
      if (input == '')
        output[0].selected = true;
    }