关闭

ajax制作类似google搜索

538人阅读 评论(0) 收藏 举报

<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);
            }
        }
    } 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:15217次
    • 积分:316
    • 等级:
    • 排名:千里之外
    • 原创:16篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条
    文章存档
    最新评论