用js写的自动完成功能AutoComplete

         QQ上一个朋友让我帮忙用JS写一个自动完成的功能，类似ajax toolkit里面的autocomplete控件一样，可以象google的自动搜索一样。
http://www.asp.net/AJAX/Control-Toolkit/Live/AutoComplete/AutoComplete.aspx
但是又不愿意为了这一个控件而安装整个大包，给项目部署带来麻烦。

         想想用js做起来也不难，我的想法是在input text的后面放一个div，然后把自动完成的一些数据放到div的table 中，然后通过正则表达式进行筛选，来达到过滤显示的效果，这样缺点是如果自动完成项目很多的话，最后生成的页面html代码会很长，不过对于简单的应用来说应该是够用了。有其他更好的方法可以讨论一下。



代码如下：

 <script type="text/javascript" language="javascript">
    function onTD(obj)
    {
        obj.bgColor='#00ff00';
    }
    function outTD(obj)
    {
        obj.bgColor='#ffffff';
    }
    function ShowDropDown(divName,inputText)
    {
        var div1=document.getElementById(divName);
        var txt=inputText.value; 
        if(txt=='')
            return;     
        var tbody=div1.firstChild.firstChild;
        var flag=false;
        for(var i=0;i<tbody.childNodes.length;i++)
        {
            var tdText=tbody.childNodes(i).firstChild.innerText;
            var pattern =new RegExp('^'+txt,'g');            
            if(pattern.test(tdText))
            {                
                tbody.childNodes(i).style.display='block';
                flag=true;
            }
            else
            {
                tbody.childNodes(i).style.display='none';
            }
        }
        div1.style.display=flag?'block':'none';       
    }
    function GetTdText(td,txtId,divId)
    {
        var tdtxt=td.innerText;
        var txt=document.getElementById(txtId);
        var div=document.getElementById(divId);
        txt.value=tdtxt;
        div.style.display='none';
    }
    
    </script>

Html代码部分

                        <input id="Text1" runat="server"  onkeyup="javascript:ShowDropDown('dropdown',this)" type="text" /><div id="dropdown" style="width: 100px; height: 100px; display:none">
                            <table runat="server" id="tbTable1">
                                <tr>
                                    <td onmouseout="javascript:outTD(this)" onmouseover="javascript:onTD(this)" onclick="javascript:GetTdText(this,'Text1','dropdown')">
                                    art11111
                                    </td>
                                </tr>
                                <tr>
                                    <td onmouseout="javascript:outTD(this)" onmouseover="javascript:onTD(this)" onclick="javascript:GetTdText(this,'Text1','dropdown')">
                                    bbbbbbbbbb
                                    </td>
                                </tr>
                                <tr>
                                    <td onmouseout="javascript:outTD(this)" onmouseover="javascript:onTD(this)" onclick="javascript:GetTdText(this,'Text1','dropdown')">
                                    arbbbbbbb
                                    </td>
                                </tr>
                            </table>
                        </div>

后台数据绑定

    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt=;//从数据库中取
        foreach (DataRow dr in dt.Rows)
        {
            HtmlTableRow htr = new HtmlTableRow();
            HtmlTableCell htc = new HtmlTableCell();
            htc.Attributes["onmouseout"] = "javascript:outTD(this)";
            htc.Attributes["onmouseover"] = "javascript:onTD(this)";
            htc.Attributes["onclick"] = "javascript:GetTdText(this,'Text1','dropdown')";
            htc.InnerHtml = dr[0].ToString();
            htr.Cells.Add(htc);
            tbTable1.Rows.Add(htr);
        }        
    }