JS实现自动匹配搜索字符

JS如下:

var TextUtil = new Object();
var ListUtil = new Object();

ListUtil.remove = function(oListbox,iIndex)
{
    oListbox.remove(iIndex);
}

ListUtil.clear = function(oListbox)
{
    for(var i = oListbox.options.length -1; i >=0;i--)
    {
        ListUtil.remove(oListbox,i);
    }
}

ListUtil.add = function(oListbox,sName,sValue)
{
    var oOption = document.createElement("option");
    oOption.appendChild(document.createTextNode(sName));
   
    if(arguments.length == 3)
    {
        oOption.setAttribute("value",sValue);
    }
    oListbox.appendChild(oOption);
}

TextUtil.autosuggestMatch= function (sText,arrValues)
{
    var arrResult = new Array;
    if(sText !="")
    {
        for(var i = 0; i < arrValues.length;i++)
        {
            if(arrValues[i].indexOf(sText) == 0)
            {
                arrResult.push(arrValues[i]);
            }
        }
    }
    return arrResult;
}

TextUtil.autosuggest = function(oTextbox,arrValues,sListboxId)
{
    var oListbox = document.getElementById(sListboxId);
    ListUtil.clear(oListbox);

    var arrMatches = TextUtil.autosuggestMatch(oTextbox.value,arrValues);
    for(var i = 0; i < arrMatches.length;i++)
    {
        ListUtil.add(oListbox,arrMatches[i]);
    }
   
}

HTML如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script src=JScript1.js type="text/javascript"></script>
    <script type="text/javascript" >
        var arrColors  = ["red","orange","yellow","green","blue","indigo","violet","brown","black","tan","ovory","navy",
                            "aqua","white","purple","pink","gray","silver"];
        arrColors.sort();
       
        function setText(oListbox,sTextboxId)
        {
            var oTextbox = document.getElementById(sTextboxId);
            if(oListbox.selectedIndex>-1)
            {
                oTextbox.value = oListbox.options[oListbox.selectedIndex].text;
            }
        }                    
    </script>
</head>
<body>
    <input type ="text" value = "" id="txtColor" onkeyup="TextUtil.autosuggest(this,arrColors,'lstColors')" /><br />
    <select id="lstColors" size="5" style="200px" onclick="setText(this,'txtColor')"></select>
</body>
</html>

原文地址:https://www.cnblogs.com/vihone/p/1886527.html