自动完成以在javascript中选择选项

Question

自动完成以在javascript中选择选项

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

就像是

  <input type=text onkeyup=findit()>

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

Run Code Online (Sandbox Code Playgroud)

我发现这个代码'但它只适用于页面中的一个选择(我需要多选)

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

Run Code Online (Sandbox Code Playgroud)

任何想法如何让它在页面上的多选择工作？

谢谢

Baaroz

Answer 1

MiG*_*GnH 9

不确定这是否适合你,但selected.js有一个非常好的自动填充多选

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

链接已移动 https://harvesthq.github.io/chosen/ (2认同)

归档时间：	13 年，4 月前
查看次数：	34579 次
最近记录：	12 年，7 月前