ajax实现搜索提示源码,Servlet+Ajax实现搜索框智能提示代码

#mydiv{

position: absolute;

left:50%;

top:50%;

margin-left: -200px;

margin-top: -50ps;

}

.mouseOver{

background: #708090;

color:#FFFAFA;

}

.mouseOut{

background: #FFFAFA;

color:#000000;

}

var xmlHttp;

//获取用户输入内容的关联信息的函数

function getMoreContents(){

//首先获取用户的输入

var content=document.getElementById("keyword");

if(content.value==""){

clearContent();

return;

}

//alert(content.value);

//然后要给服务器发送用户输入的内容,因为采用的是ajax异步发送数据,所以要使用一个对象,XmlHttp对象

//xmlHttp=获得xmlHttp对象;

xmlHttp=createXMLHttp();

//alert(xmlHttp);-- Object XMLHttpRequest对象

//要给服务器发送数据

var url="search?keyword="+escape(content.value);

//true(异步)表示js脚本会在send()方法之后继续执行,而不会等待来自服务器的响应--客户端发送数据给服务器

xmlHttp.open("get", url, true);

//xmlHttp绑定回调方法,这个回调方法会在xmlHttp状态改变的时候被调用,0-4状态,4状态表示交互完成

//当完成之后,再调用回调方法才有意义 callback函数处理后台返回给前台的数据

xmlHttp.onreadystatechange=callback;

xmlHttp.send(null);

}

//获得XmlHttp对象

function createXMLHttp(){

//对于大多数的浏览器都适用

var xmlHttp;

if(window.XMLHttpRequest){

xmlHttp=new XMLHttpRequest();

}

//需要考虑浏览器的兼容性

if(window.ActiveXObject){

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

if(!xmlHttp){

xmlHttp==new ActiveXObject("Msxml2.XMLHTTP");

}

}

return xmlHttp;

}

//回调函数

function callback(){

//4代表完成

if(xmlHttp.readyState==4){

//200代表服务器响应成功,404代表路径错误资源未找到,500代表服务器内部错误

if(xmlHttp.status==200){

//交互成功,获得相应的数据,是文本格式

var result=xmlHttp.responseText;

//客户端获得json格式的数据--解析获得的数据 java的json和js的json有点小区别

var json=eval("("+result+")");

//获得数据之后,就可以动态的显示这些数据了,把这些数据显示到输入框的下面

//alert(json); //ajax,ajax post,james

setContent(json);

}

}

}

//设置关联数据的展示,参数代表的是服务器传递过来的关联数据,contents就是json传过来的解析过的result数据

function setContent(contents){

clearContent();

setLocation();

//首先获得关联数据的长度,以此来确定生成多少tr

var size=contents.length;

//设置内容

for(var i=0;i

var nextNode=contents[i];//代表的是json数据的第i个元素

var tr=document.createElement("tr");

var td=document.createElement("td");

td.setAttribute("border", "0");

td.setAttribute("bgcolor", "#FFFAFA");

//创建一个文本节点

var text=document.createTextNode(nextNode);

td.appendChild(text);

tr.appendChild(td);

document.getElementById("content_table_body").appendChild(tr);

//鼠标移入绑定的"mouseOver"样式,鼠标移出绑定"mouseOut"样式

td.οnmοuseοver=function(){

this.className='mouseOver';

}

td.οnmοuseοut=function(){

this.className='mouseOut';

}

td.οnmοusedοwn=function(){

//这个方法实现当鼠标点击一个关联的数据时,关联数据自动设置为输入框的数据

document.getElementById("keyword").value=this.innerHTML;

}

}

}

//清空之前的数据

function clearContent(){

var contentTableBody=document.getElementById("content_table_body");

var size=contentTableBody.childNodes.length;

for(var i=size-1;i>=0;i--){

contentTableBody.removeChild(contentTableBody.childNodes[i]);

}

//清除关联数据的外边框

var popDiv=document.getElementById("popDiv").style.border="none";

}

//当输入框失去焦点的时候关联信息清空

function keywordBlur(){

clearContent();

}

//设置显示关联信息的位置

function setLocation(){

//关联信息显示的位置要和输入框长度一致

var content=document.getElementById("keyword");

var width=content.offsetWidth;//输入框的宽度

var left=content["offsetLeft"];//到左边框的距离

var top=content["offsetTop"]+content.offsetHeight;//到顶部的距离

//获得显示数据的div

var popDiv=document.getElementById("popDiv");

popDiv.style.border="gray 1px solid";

popDiv.style.left=left+"px";

popDiv.style.top=top+"px";

popDiv.style.width=width+"px";

document.getElementById("content_table").style.width=width+"px";

}

οnblur="keywordBlur()" οnfοcus="getMoreContents()" />