过滤下拉

为了在正常的html中过滤掉下拉列表而付出了很多努力，我也使用了表格，例如自动补全等。这是过滤掉下拉列表的最简单解决方案

[HTML]

<SELECT NAME =“ drop” id ='drop'

onkeyup =“ editOption （arguments [0]，this）” style ='width：100px; cursor： text'mode =“ 1” >

<option value =“ 0”>默认</ option>

…

</ SELECT>

[/ HTML]

模式0：过滤列表，直到找到有效的匹配项为止；如果找不到有效的匹配项，则将充当文本框。 模式1：可编辑文本框，并在用户键入时过滤列表。 与模式0的不同之处在于，将在每个点上显示用户输入而不是过滤。 模式2：用户必须从可用列表中进行选择，无效条目将显示所选的第一个列表元素。 用户输入将过滤为可用的匹配项。 模式-1（默认）：无效的输入将显示空的下拉菜单。

并且在您的页面中具有此脚本功能应该可以做到这一点。

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

From: https://bytes.com/topic/javascript/insights/674042-filtered-drop-down