ajax实现百度搜索建议
2013-03-13 19:35
501 查看
<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>
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 借助AjaxControlToolkit实现百度搜索时的下拉列表提示
- 利用AjaxControlToolkit实现百度搜索时的下拉列表提示详细步骤
- 利用ajax，json做出百度搜索建议
- ajax遍历数组(实现百度搜索提示的效果)
- 使用MVC框架实现百度搜索建议
- 百度搜狗等搜索引擎智能提示（JSONP跨域实现自动补全搜索建议）
- 用JQueryUI库中的AutoComplete组件和Ajax实现搜索建议功能
- 百度等搜索引擎智能提示（JSONP跨域实现自动补全搜索建议）
- 仿百度搜索的文本框(第二种实现ajax联想查询的文本框)
- 简单实现google百度搜索建议
- 百度搜狗等搜索引擎智能提示（JSONP跨域实现自动补全搜索建议）
- jquery+ajax实现像百度搜索框中输入文字
- ajax实现百度搜索输入动态获取数据
- AJax实现类似百度搜索栏的功能 (面试多见)
- vs2008 asp.net ajax控件实现百度，谷歌智能搜索
- JQuery+ajax实现类似百度搜索自动匹配功能
- 基于Servlet百度搜索效果的Ajax的实现实例
- AJAX实现百度搜索栏效果
- VB.NET+AJAX搜索建议功能的实现
- 利用AjaxControlToolkit实现百度搜索时的下拉列表提示详细步骤