我正在尝试根据用户的输入自动完成选择选项

就像是

  <input type=text onkeyup=findit()>

<select id="sel">
        <option value="s0001">Adams</option>
        <option value="s0002">Alder</option>
         .
         .
         .
<select>

我找到了此代码“,但仅在页面中的一个选择上起作用(我需要多选)
<html>
<head>

 <script type="text/javascript">


 //initialize some global variables
var list = null;
function fillit(sel,fld) {


        var field = document.getElementById("entry");
        var selobj = document.getElementById("sel");
        if(!list)
        {
                var len = selobj.options.length;
                field.value = "";
                list = new Array();
                for(var i = 0;i < len;i++)
                {
                        list[i] = new Object();
                        list[i]["text"] = selobj.options[i].text;
                        list[i]["value"] = selobj.options[i].value;
                }
        }
        else
        {
            var op = document.createElement("option");
            var tmp = null;
            for(var i = 0;i < list.length;i++)
           {
                tmp = op.cloneNode(true);
                tmp.appendChild(document.createTextNode(list[i]["text"]));
                tmp.setAttribute("value",list[i]["value"]);
                selobj.appendChild(tmp)/*;*/
           }
        }
}


 function findIt(sel,field)
{
        var selobj = document.getElementById("sel");
        var d = document.getElementById("display");
        var len = list.length;
        if(field.value.length > 1)
        {
                if(!list)
                {
                        fillit(sel,field);
                }
                var op = document.createElement("option");
                selobj.options.length = 1
                var reg = new RegExp(field.value,"i");
                var tmp = null;
                var count = 0;
                var msg = "";
                for(var i = 0;i < len;i++)
                {
                        if(reg.test(list[i].text))
                        {
                               // d.childNodes[0].nodeValue = msg;
                                tmp = op.cloneNode(true);
                                tmp.setAttribute("value",list[i].value);
                                tmp.appendChild(document.createTextNode(list[i].text));
                                selobj.appendChild(tmp);
                        }
                }
        }
        else if(list && len > selobj.options.length)
        {
                selobj.selectedIndex = 0;
                fillit(sel,field);
        }
}




 </script>


</head>
<body onLoad="fillit(sel,entry)">
<div>Enter the first three letters of a street and select a match from the menu.</div>
<form>
Street
<input type="text" name="Street" id="entry" onKeyUp="findIt(sel,this)"><br>
  <select id="sel">
        <option value="s0001">Adams</option>
        <option value="s0002">Alder</option>
        <option value="s0003">bol</option>
        <option value="s0004">col</option>
        <option value="s0005">dol</option>
        <option value="s0007">Cooper</option>
<!--and so on and so forth-->
  </select>
</form>
</body>

任何想法如何使其在页面上的多重选择中起作用?

谢谢

巴罗兹

最佳答案

不知道这是否适合您,但是selected.js具有非常好的自动补全选择

http://harvesthq.github.com/chosen/

09-11 06:52
查看更多