Filtered Drop Down

[abTech]

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

[acoder]

An explanation of the code would be useful.