zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    bzoj 2257 (JSOI 2009) 瓶子与燃料
    bzoj 2257 (JSOI 2009) 瓶子与燃料
    splay 模板 洛谷3369
    费用流 模板 洛谷3381
    bzoj 1024 [SCOI2009]生日快乐——模拟
    bzoj 3231 [Sdoi2008]递归数列——矩阵乘法
    hdu 5823 color II——子集dp(独立集)
    bzoj 1093 [ZJOI2007]最大半连通子图——缩点+拓扑
    洛谷 3959 宝藏——枚举+状压dp
    bzoj 1034 [ZJOI2008]泡泡堂BNB——贪心
  • 原文地址:https://www.cnblogs.com/vihone/p/1886527.html
Copyright © 2011-2022 走看看