自动完成以在 javascript 中选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10831581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
auto complete to select option in javascript
提问by baaroz
I am trying to make auto complete to select option according to input from the user
我正在尝试根据用户的输入自动完成选择选项
something like
就像是
<input type=text onkeyup=findit()>
<select id="sel">
<option value="s0001">Adams</option>
<option value="s0002">Alder</option>
.
.
.
<select>
I found this code 'but it only work on one select in the page( I need multi 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>
Any Ideas How to make it work on multi select on the page?
任何想法如何使其在页面上的多选上工作？
Thanks
谢谢
Baaroz
巴罗兹
回答by MiGnH
Not sure if this would work for you, but chosen.js has a really nice autocomple multi select
不确定这是否适合你，但 selected.js 有一个非常好的自动完成多选
回答by Jeff Watkins
Usually Autocomplete is for single values, but the jQuery UI autocompletedoes have a multiple select function. Perhaps try that? Minimum effort coding for you that way.
通常自动完成是针对单个值的，但jQuery UI 自动完成确实有一个多选功能。也许试试那个？以最小的努力为您编码。
回答by Kareem
An odd way to do that is to change the ID in the script and copy it the number of times you want to use this options in the page. so for example:
一种奇怪的方法是更改脚本中的 ID 并将其复制到您希望在页面中使用此选项的次数。所以例如：
select id="sel1"
select id="sel2"
select id="sel3"
and then. copy the script and replace every (sel) with sel1 past it again and replace (sel) with sel2 and so on. not the best solution but it will work. Good Luck
进而。复制脚本并再次用 sel1 替换每个 (sel) 并用 sel2 替换 (sel) 等等。不是最好的解决方案，但它会起作用。祝你好运
