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);
        }
        
    }
posted on 2007-08-24 00:00  飞天名猪  阅读(2307)  评论(0编辑  收藏  举报