js做成google那种方式

后台servlet的代码

package com.mobilecn.kys.utils;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.mobilecn.kys.beans.TbOrganization;
import com.mobilecn.kys.beans.TbPerson;
import com.mobilecn.kys.business.api.PersonBusinessApi;
import com.mobilecn.kys.business.impl.PersonBusinessImpl;

public class AutoCompleteServlet extends HttpServlet {

private static final long serialVersionUID = 1L;


public void init() throws ServletException {

}


protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String keyword = request.getParameter("keyword");

keyword = StringUtil.changeCharacterToUtf(keyword);

request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");

PersonBusinessApi personBusiness = new PersonBusinessImpl();

List personList = null;

Long personid = 0L;
String name = null;
String unit = null;
String identify = null;
TbOrganization oid=null;

StringBuffer bf = new StringBuffer();

PrintWriter out = response.getWriter();

keyword = (keyword == null ? "" : keyword.trim());

personList = personBusiness.select("username like '%" + keyword + "%'");

if (personList == null) {
return;
}

int lenthg = personList.size();

bf.append("[");

for (int i = 0; i < lenthg; i++) {

TbPerson person = (TbPerson) personList.get(i);

personid = person.getPersonid();
personid = personid == null ? 0L : personid;

name = person.getUsername();
name = name == null ? "" : name;

identify = person.getPersonfigure();
identify = identify == null ? "" : identify;

oid = person.getTbOrganization() == null ? null : person.getTbOrganization();
unit = oid == null ? null : person.getTbOrganization().getUnitname();

bf.append("{");
bf.append("'");
bf.append("text");
bf.append("'");
bf.append(":");
bf.append("'");
bf.append(name);
bf.append("'");
bf.append(",");
bf.append("'");
bf.append("content");
bf.append("'");
bf.append(":");
bf.append("'");
bf.append(unit);
bf.append(",");
bf.append(identify);
bf.append(",");
bf.append(personid);
bf.append("'");

bf.append("}");

if (i != lenthg - 1) {
bf.append(",");
}

}// for
bf.append("]");
bf.append(";");

out.write(bf.toString());
out.flush();
out.close();
out = null;

System.out.println("bfbfbfbf " + bf.toString());

}

protected void doPost(HttpServletRequest arg0, HttpServletResponse arg1)
throws ServletException, IOException {
this.doGet(arg0, arg1);
}

}


js文件看一下附件

ajax的实现方法
//<![CDATA[
/* 兼容IE 7.0以前版本 XMLHttpRequest */
if(window.ActiveXObject)//IE浏览器
{
window.XMLHttpRequest = function()
{ var x=null;
var progIds = [
'MSXML3.XMLHTTP.5.0',
'MSXML3.XMLHTTP.4.0',
'MSXML3.XMLHTTP.3.0',
'MSXML3.XMLHTTP.2.0',
'MSXML3.XMLHTTP',
'MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP',
'Microsoft.XMLHTTP'];
for (var i=0; i<progIds.length; i++)
{
// alert(progIds[i]);
try { x = new ActiveXObject(progIds[i]); break; } catch (ex) {};
}
x=null;
x = new ActiveXObject("MSXML2.XMLHTTP");
if(!x)//异常，创建对象实例失败
{
window.alert("创建XMLHttp对象失败！");
return false;
}
return x;
}
}

var autoComplete = null;
var http_request = null;
// alert("aa");



window.onload = function pageLoadHdle()
{
var configuration =
{
instanceName: "autoComplete",
textbox: document.getElementById("magazineAuto"),
height: 200
//dataSource: this.completeDataSource
};
autoComplete = new neverModules.modules.autocomplete(configuration);


autoComplete.useContent = true;

/* 当useContent为false时，此功能生效，确定是否忽略速度，
如果不忽略速度，则效率提高30%左右，（没测试过，估计的）
，也就是没有高亮功能，适合纯DHTML的匹配 */
autoComplete.ignoreSpeed = true;


/* 开启方向键（小键盘） */
autoComplete.useArrow = true;

/* 当数据量较大时，自动截取前部分的数据，提高效率 */
autoComplete.autoSlice = true;
//autoComplete.sliceRange.high = 20;//显示前面20条
//要调节显示出来的结果的左右两边的宽度可以去CSS那里设置，autocomplete.css

/* 无论输入字符串在dataSource的何处，始终匹配 比如输入1，那么21，12都会显示出来*/
autoComplete.ignoreWhere = true;

/* 设置content的数据是否要在检索结果中显示出来 vincent于2007-8-22修改*/
autoComplete.ifcontent = true;


/* 一个空格代表一个或多个字符（串） */
autoComplete.useSpaceMatch = true;

/* 忽略大小写 */
autoComplete.ignoreCase = true;

autoComplete.callback = callbackHdle;

/* 以上为可选项，这里的示例都是默认值 } */
autoComplete.create();
// autoComplete.expandAllItem();//显示全部数据
}
function AjaxHdleMagazine(evt,magazineURL)
{
//alert("aaa");
// var conValue =document.getElementById('autoRemark').value
//if(conValue!=document.getElementById('magazineAuto').value)
//{
//开始初始化XMLHttpRequest对象
http_request = new XMLHttpRequest();
http_request.onreadystatechange = function() {loadCompleteData(evt)};
//确定发送请求方式，URL，及是否同步执行下段代码
http_request.open("GET", magazineURL+"?type=view&search=" + document.getElementById("magazineAuto").value, true);
http_request.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
http_request.send(null);
// }
//document.getElementById('autoRemark').value=conValue;

}
/* 异步得到数据后加载dataSource */
function loadCompleteData(evt)
{
// alert("000");
if(http_request.readyState == null){

http_request = new XMLHttpRequest();
alert("http_request.readyState 为空 !");
}
if(http_request.readyState==4)//判断对象状态
{
//alert("111");
if(http_request.status==200)//信息已成功返回，开始处理信息
{
dataSource = window.eval(http_request.responseText);
autoComplete.setDataSource(dataSource);
showAutocomplete(evt); http_request=null;
}else//页面不正常
{
alert("您所请求的页面不正常！");
return;
}
}
}
function showAutocomplete(evt)
{
autoComplete.hdleEvent(evt);
window.setTimeout(function () {autoComplete.closeAnimateImage();},1000);
}
/* callback 回调函数 */
function callbackHdle(autocompleteValue, autocompleteContent) {
window.setTimeout(function() {

document.getElementById('magazineAuto').value = autocompleteValue;
//alert(autocompleteValue);
// alert(autocompleteContent);
document.getElementById("level").value = autocompleteContent;

},1000);
}

//]]>


实现看附件