7

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

就像是

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

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

谢谢

巴罗兹

4

3 回答 3

11

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

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

于 2012-05-31T10:22:45.543 回答
0

通常自动完成是针对单个值的，但jQuery UI 自动完成确实有一个多选功能。也许尝试一下？以这种方式为您编码最少的工作量。

于 2012-05-31T10:19:32.063 回答
0

一种奇怪的方法是更改​​脚本中的 ID 并将其复制到您希望在页面中使用此选项的次数。例如：

select id="sel1"
select id="sel2"
select id="sel3"

接着。复制脚本并将每个 (sel) 替换为 sel1，然后将 (sel) 替换为 sel2，依此类推。不是最好的解决方案，但它会起作用。祝你好运

于 2013-03-16T14:36:49.187 回答