Have struggled a lot to get a filtered drop down in the normal html and that too editable ... i have used table like auto-completion etc ... This is the simplest solution for a filtered drop down
[HTML]
<SELECT NAME="drop" id='drop'
onkeyup="editOption(arguments[0], this)" style='width:100px;cursor:text'
mode="1">
<option value="0">Default</option>
…
</SELECT>
[/HTML]
Mode 0: Filters the list till a valid match is found, if not found then will behave as a text box.
Mode 1: Editable text box and filters the list as the user types. Difference from mode 0 is that at every point user inputs will be shown rather than filtering.
Mode 2: User has to select from list available, Invalid entry would show the first list element as selected. User inputs is to filter to available match.
Mode -1 (Default): Invalid entry would show empty drop down.
And Have this script function in your page should do it.
-
function editOption(nse, obj)
-
{
-
var key = nse?nse.keyCode:event.keyCode;
-
if(key>=33 && key<=40)
-
{
-
return true;
-
}
-
var text = obj.getAttribute("filter");
-
if(typeof(text)=="undefined" || text==null)
-
{
-
text = "";
-
}
-
if(key==8 && text.length>0)
-
{
-
text = text.substring(0, text.length-1);
-
}
-
else if(key>31)
-
{
-
text += String.fromCharCode(key);
-
}
-
else
-
{
-
return true;
-
}
-
text = text.toLowerCase();
-
var plist = obj.getAttribute("list");
-
var list = [];
-
if(typeof(plist)=="undefined" || plist==null)
-
{
-
plist = "";
-
for(var i=0, ilen=obj.options.length; i<ilen; i++)
-
{
-
list[i] = [obj.options[i].text, obj.options[i].value];
-
plist += obj.options[i].text+":"+obj.options[i].value+",";
-
}
-
obj.setAttribute("list", plist);
-
}
-
else
-
{
-
var tlist = plist.split(',');
-
for(var i=0, ilen=tlist.length; i<ilen; i++)
-
{
-
list[i] = tlist[i].split(':');
-
}
-
}
-
for(var i=obj.options.length-1; i>=0; i--)
-
{
-
obj.options[i] = null;
-
}
-
var mode = obj.getAttribute("mode");
-
if(typeof(mode)=="undefined" || mode==null)
-
{
-
mode = -1;
-
}
-
var optn;
-
if(mode==1)
-
{
-
optn = document.createElement("OPTION");
-
optn.text = text;
-
optn.value = text;
-
optn.selected = true;
-
obj.options.add(optn);
-
obj.selectedIndex = 0;
-
}
-
for(var i=0, ilen=list.length; i<ilen; i++)
-
{
-
if(list[i][0].toLowerCase().indexOf(text)==0)
-
{
-
optn = document.createElement("OPTION");
-
optn.text = list[i][0];
-
optn.value = list[i][1];
-
if(mode==1)
-
{
-
optn.selected = false;
-
}
-
obj.options.add(optn);
-
}
-
}
-
if(obj.options.length==0)
-
{
-
if(mode==0)
-
{
-
optn = document.createElement("OPTION");
-
optn.text = text;
-
optn.value = text;
-
obj.options.add(optn);
-
}
-
else if(mode==2)
-
{
-
for(var i=0, ilen=list.length; i<ilen; i++)
-
{
-
optn = document.createElement("OPTION");
-
optn.text = list[i][0];
-
optn.value = list[i][1];
-
obj.options.add(optn);
-
}
-
obj.selectedIndex = 0;
-
text = "";
-
}
-
}
-
obj.setAttribute("filter", text);
-
return false;
-
}
-
