类似google的下拉

<script type="text/javascript">
        
var xmlHttp;//定义XmlHttpRequest对象
        function createXmlHttp()//create object
        {
            
try
            
{
                xmlHttp
=new XMLHttpRequest();
            }

            
catch(microsoft)
            
{
                
try
                
{
                    xmlHttp
=new ActiveXObject("Microsoft.XMLHTTP");
                }

                
catch(othermicrosoft)
                
{
                    
try
                    
{
                        xmlHttp
=new ActiveXObject("Msxml2.XMLHTTP");
                    }

                    
catch(failed)
                    
{
                        xmlHttp
=false;
                    }

                }

            }

        }

        
//ul的focusout事件 失去焦点时隐藏智能提示
        function FocusOut()
        
{
            
var ob=event.srcElement;
            ob.style.display
='none';
        }

        
//LI上的鼠标Over事件  改变背景色
        function MouseOver()
        
{
            
var ob=event.srcElement;
            ob.style.backgroundColor
='#E0E0E0';
        }

        
//LI上的鼠标Out事件 背景色还原
        function MouseOut()
        
{
            
var ob=event.srcElement;
            ob.style.backgroundColor
='#fff';
        }

        
//LI上的鼠标Click事件 获得智能提示的列表框值
        function Click()
        
{
            
var ob=event.srcElement;
            document.getElementById(
"Search1_txtKey").value=ob.innerText;
            document.getElementById(
"hint").style.display='none';
        }

    
function getInformation(obj)
    
{
        
//输入框值为空 搜索按钮不可用
        if(obj.value=="")
        
{
            document.getElementById(
"<%=btnSearch.ClientID%>").disabled=true;
            
return;
        }

        document.getElementById(
"<%=btnSearch.ClientID%>").disabled=false;
        createXmlHttp();
        
var url="/News/AjaxPage/DealNews.aspx?name="+escape(obj.value);//传递中文必须编码
        xmlHttp.open("GET",url,true);
        xmlHttp.onreadystatechange
=handleRequest;
        xmlHttp.send(
null);
    }

    
function handleRequest()
    
{
        
if(xmlHttp.readyState==4)
        
{
            
if(xmlHttp.status==200)
            
{
                
//清空智能提示框
                var oldChild=document.getElementById("hint").childNodes;
                
for(i=0;i<oldChild.length;i++)
                
{
                    document.getElementById(
"hint").removeChild(oldChild[i]);
                }

                
//获得返回值
                var xmlDoc=xmlHttp.responseXML;
                
var nodes=xmlDoc.selectNodes("//Element");
                
if(nodes.length<=0)
                
{
                    
//如果得到的值为空就返回
                    return;
                }

                
//得到了返回值 动态创建列表元素
                var UL=document.createElement("UL");
                UL.attachEvent('onmouseleave',FocusOut);
                
for(i=0;i<nodes.length;i++)
                
{
                    
//创建LI对象 
                    var LI=document.createElement("LI");
                    LI.innerText
=nodes[i].firstChild.nodeValue;
                    
//给li对象添加事件 用attachEvent绑定事件 用setAttribute好象不行
                    LI.attachEvent('onmouseover',MouseOver);
                    LI.attachEvent('onmouseout',MouseOut);
                    LI.attachEvent('onclick',Click);
                    UL.appendChild(LI);
                }

                
//设置ul的高度
                var height;
                
if(nodes.length<10)
                
{
                    height
=nodes.length*20;
                }

                
else
                
{
                    height
=10*20;
                }

                UL.style.cssText
="height:"+height+"px;width:100%;margin:0;padding:0;border:1px solid #758ca9;overflow:hidden;";//对UL设置css样式
                document.getElementById("hint").appendChild(UL);
            }

        }

    }
 

做了个类似ajax的下拉 操作基本都在客户端 不过onkeyup或onkeydown事件与服务器交互太频繁,会造成服务器负担过重
且Http协议本身的不可靠问题 此程序还是有很多的bug

posted @ 2007-11-27 13:00  孤城浪子  阅读(465)  评论(0编辑  收藏  举报
博客园,让我更上一层楼