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

使用javascript ajax C#实现类似百度的搜索框效果

使用javascript ajax C#实现类似百度的自动搜索效果 文本框下方是一个div,里面是一个ul标签,初始状态此ul中不包含任何的li标签。 当文本框文字改变的时候,使用ajax把文本框...
  • i99121570
  • i99121570
  • 2014-04-30 16:17:06
  • 2033

ajax类似google搜索

  • 2012年10月16日 20:23
  • 1.1MB
  • 下载

一个类似GOOGLE搜索输入框的AJAX小程序

  • 2008年05月31日 01:59
  • 69KB
  • 下载

jquery+jsp+ajax实现类似的百度搜索下拉框

搜索词自动完成 $(function(){ //取得d
  • wohuozheng
  • wohuozheng
  • 2017-02-28 15:02:21
  • 506

ajax google

  • 2009年09月18日 10:33
  • 27KB
  • 下载

类似Google Calendar效果的简单实现

2007/11/02目前只是简单的实现了行选择的效果。后面的功能也是利用DIV来实现的并结合Ajax方法将登陆的数据保存到数据库中。DOCTYPE HTML PUBLIC "-//W3C//DTD H...
  • wanyongping
  • wanyongping
  • 2007-11-02 11:22:00
  • 2482

Java Ajax实现Google搜索栏的那种动态补全

  • 2010年01月08日 14:16
  • 224KB
  • 下载

仿Google首页搜索自动补全!(原创分享jQuery版)

最近学习了一下Ajax,用jQuery做了一些例子,其中觉得仿Google自动补全这个挺帅的。 也是例子里最复杂的一个,后来我又修改了很长时间,尽量模仿的逼真,但是还是没达到预期效果,对汉字,拼...
  • my98800
  • my98800
  • 2017-08-04 08:44:56
  • 410

类似google搜索内容补全

  • 2011年05月25日 12:30
  • 1.34MB
  • 下载

使用Ajax模仿Google suggest的搜索提示(Java+JSP+JS实现)

使用Ajax模仿Google suggest的搜索提示(Java+JSP+JS实现)
  • ghostsk3
  • ghostsk3
  • 2014-12-20 09:13:55
  • 1357
收藏助手
不良信息举报
您举报文章:ajax制作类似google搜索
举报原因:
原因补充:

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