22
rated 0 times
[
27]
[
5]
/ answers: 1 / hits: 45839
/ 12 Years ago, thu, may 31, 2012, 12:00:00
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
More From » input
