ajax制作类似google搜索

原创 2007年10月02日 00:32:00

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

实现类似google搜索效果,文本框输入智能提示,没有用ajax控件和第三方控件,完全手写代码

前台页面代码:<html xm
  • wdywqc
  • wdywqc
  • 2011-04-12 10:18
  • 1916

jquery实现搜索框自动补全功能,类似google搜索引擎,数据是用Ajax从后台获得

#search_box {  width: 201px;  height: 31px;  background: url(/image/bg_search_box.gif);  ...

类似google动态搜索提示

关于实现类似google动态搜索提示的问题,然后突然就自己想为什么不写成一个通用的组件呢?说到做到,呵,然后就马上开始写这个动态搜索提示的类了,当然是基于JS的AJAX应用咯。搜索的结果来源于服务器返...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)