JavaWeb中实现类似Google Suggest自动完成_ajax java jsp实现suggest-CSDN博客

Google Suggest(谷歌搜索)就是在搜索框输入一个或多个文字时，会自动列出与该输入文字相关的部分常用搜索词汇。这在Web应用中经常能看到，比如百度搜索、搜狗搜索等，在JavaWeb中可以使用ajax技术来完成这一类似的功能。这里是基于JSP+Servlet+JDBC实现。

JSP关键代码

html代码:就是一个文本框，使用oninput事件，这个事件是HTML5标准事件，(如果使用的是IE浏览器可以考虑使用onpropertychange事件),该事件用于监听文本框的输入，以此调用getSuggest()函数。

<input oninput="getSuggest();" class="inputText mr5 search" type="text"

id="SearchKeyWord" size="35" placeholder="搜索单号、供应商、商品、备注" >

js关键代码(首先需要编写创建XMLHttpRequest对象(ajax请求服务器的方法,POST、GET请求)，这里就不贴出该代码块了)。下面代码中的getSuggest函数方法主要作用是将获取到的关键字发送到服务器从而获取到符合条件的关键字信息，请求路径后的参数分别是调用的方法名以及输入的文字、当前时间(之所以加上当前时间是为了防止浏览器缓存)。

var suggestReq = false; //req对象

var mateSize=0;//总条目

var curSize=-1;//当前条目

//getSuggest请求方法

function getSuggest() {

if(event.keyCode!=13 && event.keyCode!=38 && event.keyCode!=40){

curSize=-1;//当前条目

var suggest = document.getElementById("SearchKeyWord").value;

var url="StockServlet?methodName=getKeyInfo";

var param ="&inputKeys="+encodeURI(suggest)+"&nocache=" + new Date().getTime();

suggestReq=httpRequest("post",url,true,callbackofGetKey,param); //调用请求方法

}

下面代码是getSuggest()请求方法的回调函数，如果响应成功后获取返回XML格式数据，使用childNodes.legth方法获取返回id为content的子元素个数，然后保存到全局变量mateSize中以便使用，之后就是移除指定的节点，获取到返回的keyWord节点遍然后再调用addContent(content)方法为提示框添加信息，添加后显示提示框或隐藏提示框。。

//Ajax回调函数

function callbackofGetKey(){

var content;

if( suggestReq.readyState==4 ){ //判断响应是否完成

if( suggestReq.status == 200 ){ //判断响应是否成功

var doc = suggestReq.responseXML; //获取XML格式的关键字

var contentObj = document.getElementById("content");//获取content对象

mateSize=contentObj.childNodes.length; //条目数

while(true){ //清空提示内容对象

if(contentObj.hasChildNodes()){

contentObj.removeChild(contentObj.firstChild);//移除指定的节点

}else{

break;//跳出while循环

}}

content = doc.getElementsByTagName("keyWord");//获取XML中的keyWord节点 if(content.length>0){

for(var i=0;i<content.length;i++){

addContent(content[i].firstChild.nodeValue);

}

document.getElementById("toolBox").style.visibility="visible";//显示提示框

}else{、document.getElementById("toolBox").style.visibility="hidden";

}} }}

function addContent(content){ //为id为content的span添加内容

var contentObj = document.getElementById("content");//获取content对象

var divContent = document.createElement("div");//创建div

divContent.innerHTML=content;//div的内容

divContent.style.paddingLeft="2px";//设置文字与左边框的距离

divContent.onmouseover = function(){//鼠标移入事件

this.style.background="#eee";//当鼠标在条目上时改变背景色

this.style.color="black ";//当鼠标在条目上时改变文字颜色

};

divContent.onmouseout = function(){//鼠标移出事件

this.style.background="#FFFFFF";//鼠标移开时变为原来的背景色

this.style.color="#000000";//鼠标在条目上时改变文字颜色};

divContent.onclick=function(){//添加单击事件

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

document.getElementById("toolBox").style.visibility="hidden";

};

contentObj.appendChild(divContent);//将对象添加在contentObj对象中 }

Servlet代码:获取到参数，若不为空，将URL参数进行解码(因为在jsp页面已经将参数进行转码)，设置响应体类型为xml，调用service层的方法，该方法返回的是Document(org.dom4j.Document文档对象),最后将xml文档输出到浏览器。