ajax实现百度搜索建议

来源:互联网 发布:软件行业方向 编辑:程序博客网 时间:2024/05/18 07:22

<head>
<script>
<!--  
   function sAlert(str){
   var msgw,msgh,bordercolor;
   msgw=400;                      // 提示窗口的宽度
   msgh=100;                      // 提示窗口的高度
   titleheight=25                 // 提示窗口标题高度
   bordercolor="#000000";         // 提示窗口的边框颜色
   
   var bgObj=document.createElement("div");               // 设置整个锁定页面
   bgObj.setAttribute('id','bgDiv');
   bgObj.style.position="absolute";
   bgObj.style.top="0";
   bgObj.style.background="#0000ff";      // 设置背景颜色
   bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";
   bgObj.style.opacity="0.09";             // 设置透明度
   bgObj.style.left="0";                  // 左边距
   bgObj.style.width="100%";              // 层宽度
   bgObj.style.height="100%";             // 层高度
   document.body.appendChild(bgObj);
   
   var msgObj=document.createElement("div")           // 设置整个显示表格框
   msgObj.setAttribute("id","msgDiv");
   msgObj.setAttribute("align","center");
   msgObj.style.background="#ffffff";                 // 背景颜色
   msgObj.style.border="1py solid " + bordercolor;    // 设置框粗细
      msgObj.style.position = "absolute";             // 位置

            msgObj.style.left = "50%";
            msgObj.style.top = "50%";
            msgObj.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
            msgObj.style.marginLeft = "-225px" ;
            msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
            msgObj.style.width = msgw + "px";
            msgObj.style.height = msgh + "px";
   
     var title=document.createElement("h4");           // 设置关闭框
     title.setAttribute("id","msgTitle");
     title.setAttribute("align","right");              // 文字设定位置
     title.style.background=bordercolor;               // 设定背景颜色
     title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
     title.style.opacity="0.75";                       // 设定透明度
     title.style.border="1px solid " + bordercolor;    // 设定边框粗细
     title.style.height="18px";                        // 设置高度
     title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";    // 设定文字字体 
     title.style.color="#ffffff";                      // 设定文字颜色
     title.style.cursor="pointer";                     // 设定鼠标形状
     title.innerHTML="关闭";
     title.onclick=function(){                         // 取消锁定                     
          document.body.removeChild(bgObj);
                document.getElementById("msgDiv").removeChild(title);
                document.body.removeChild(msgObj);
                }
     document.body.appendChild(msgObj);
     document.getElementById("msgDiv").appendChild(title);
     var txt=document.createElement("p");
     txt.setAttribute("id","msgTxt");
     txt.innerHTML=str;
     document.getElementById("msgDiv").appendChild(txt);
}
//-->


function chooseIt(obj)//obj是用this传递过来的当前点击对象
{
 document.getElementById("search").value=obj.innerHTML;//将选择的内容在文本框中进行填充
 document.getElementById("dv").innerHTML="";//清空搜索建议的内容
 document.getElementById('dv').style.display = "none";//让搜索建议图层的边框消失
 }
function onIt(obj){
 obj.style.backgroundColor = "#36F";
 }
function outIt(obj){
 obj.style.backgroundColor = "#CCC";
 }
function init(){
  document.getElementById('dv').style.display = "none";
 }
function startAjax(obj){
  var xhr;
  if(window.ActiveXObject){
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }else if(window.XMLHttpRequest){
   xhr = new XMLHttpRequest();
  }
  //在发送请求之前,需要知道服务器的地址
  var url = "index.php?c=user&a=baiduSuggest";
  xhr.open("post",url,true);
  //设置监听请求状态
xhr.onreadystatechange = callback;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
if(obj==''){document.getElementById('dv').style.display = "none";}else{
xhr.send("var="+obj);}
function callback(){
 if(xhr.readyState ==4){
 if(xhr.status==200){
  var json = eval('('+xhr.responseText+')');
  var str = '';
  for(var i=0;i<json.length;i++){
  str += '<span style="position:absolute; left:0" onclick="chooseIt(this)" onmouseover="onIt(this)" onmouseout="outIt(this)">'+json[i].id+"</span><br/>";
  document.getElementById("dv").style.display = "block";
     
  document.getElementById("dv").innerHTML = str;
    }
   }
  }
 }
}
</script>
</head>

<body onLoad="init()" onclick="init()">
<center>
<h1>百度一下,你就知道</h1>
<table>
<tr>
<td>
<form action="#" method="post">
<input type="text" size="30" id="search" onKeyUp="startAjax(this.value)"/>
<div id="dv" align="left" style=" position:relative; background-color:#CCC; border:dashed #666 1px"></div>
</td><td>
<input type="submit" value="搜索" size="10" />
<input type="button" value="锁定页面按钮" onClick="sAlert('JavaScript锁定页面');">
</td>
</form>
</tr>
</table>
</center>
</body>

原创粉丝点击