7

ユーザーからの入力に応じてオプションを選択するためにオートコンプリートを作成しようとしています

何かのようなもの

  <input type=text onkeyup=findit()>

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

このコードを見つけました'しかし、ページ内の1つの選択でのみ機能します（複数選択が必要です）

<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

これがうまくいくかどうかはわかりませんが、chosen.jsには本当に素晴らしい自動補完マルチセレクトがあります

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

于 2012-05-31T10:22:45.543 に答える
0

通常、オートコンプリートは単一の値用ですが、jQueryUIオートコンプリートには複数の選択機能があります。おそらくそれを試してみませんか？そのようにコーディングするための最小限の労力。

于 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 に答える