首先整体的思路是：HTML端由一个input和div组成，div的隐藏和显示实现下拉框提示，input的字符输入动作触发js的函数，通过ajax来与jsp通信，获得模糊查询结果，返回前台来显示。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta content="text/html" charset="GBK" />
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script type="text/javascript">
// ajax.js
var XMLHttpReq;
var completeDiv;
var inputField;
var completeTable;
var completeBody;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
var o//=============
if(window.XMLHttpRequest) { //Mozilla 浏览器
o = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
o = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e){
try{
o = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
return o;//=============
}
function findNames() {
inputField = document.getElementById("names");
completeTable = document.getElementById("complete_table");
completeDiv = document.getElementById("popup");
completeBody = document.getElementById("complete_body");
if (inputField.value.length > 0) {
var o=createXMLHttpRequest();
var url = "http://192.168.1.101/OAapp/jsp/index.jsp?names=" + escape(inputField.value);
//此处escape函数可以去掉，escape是采用ISO Latin字符集对指定的字符串进行编码。
o.open("GET", url, true);
o.onreadystatechange = function(){
if (o.readyState == 4) { // 判断对象状态
if (o.status == 200) { // 信息已经成功返回，开始处理信息
setNames(o.responseXML.getElementsByTagName("res"));
}else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
};//指定响应函数
o.send(null); // 发送请求
} else {
clearNames();
}
}
// 处理返回匹配信息函数
function processMatchResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
alert("XMLHttpReq.responseText"); //输出看是否有乱码===============
setNames(XMLHttpReq.responseXML.getElementsByTagName("res"));
}else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
//生成与输入内容匹配行
function setNames(names) {
clearNames();
var size = names.length;
setOffsets();
var row, cell, txtNode;
for (var i = 0; i < size; i++) {
var nextNode = names[i].firstChild.data;
row = document.createElement("tr");
cell = document.createElement("td");
cell.onmouseout = function() {
this.className='mouseOver';
};
cell.onmouseover = function() {
this.className='mouseOut';
};
cell.setAttribute("bgcolor", "#ffddcc");
cell.setAttribute("border", "0");
cell.setAttribute("width",inputField.offsetWidth+"px");
cell.onclick = function() {
completeField(this);
} ;
txtNode = document.createTextNode(nextNode);
cell.appendChild(txtNode);
row.appendChild(cell);
completeBody.appendChild(row);
}
}
//设置显示位置
function setOffsets() {
completeTable.style.width = "auto"; //显示自动完成的提示框宽度自动伸展或缩小
gettable(inputField);
}
//取绝对位置
function getAbsPosition(obj) {
var r = {
left: obj.offsetLeft,
top : obj.offsetTop
};
r.left = obj.offsetLeft;
r.top = obj.offsetTop;
if(obj.offsetParent) {
var tmp = getAbsPosition(obj.offsetParent);
r.left += tmp.left;
r.top += tmp.top;
}
return r;
}
//为提示定位
function gettable(obj) {
var pos = getAbsPosition(obj);
pos.top += obj.offsetHeight;
completeDiv.style.top = pos.top + "px";
completeDiv.style.left = pos.left + "px";
completeDiv.style.width = obj.offsetWidth + "px";
completeDiv.style.visibility = '';
}
//计算显示位置
function calculateOffset(field, attr) {
var offset = 0;
while(field) {
offset += field[attr];
field = field.offsetParent;
}
return offset;
}
//填写输入框
function completeField(cell) {
inputField.value = cell.firstChild.nodeValue;
clearNames();
}
//清除自动完成行
function clearNames() {
var ind = completeBody.childNodes.length;
for (var i = ind - 1; i >= 0 ; i--) {
completeBody.removeChild(completeBody.childNodes[i]);
}
completeDiv.style.border = "none";
}
</script>
<input type="text" id="names" onkeyup="findNames();" size="20">
<div id="popup" border="0" style="z-index:99;visibility:hidden;position:absolute;border:1px solid black;">
<table id="complete_table" border="0" cellspacing="0" cellpadding="0" style="background-color: #cceeff;">
<tbody id="complete_body"></tbody>
</table>
</div>
</BODY>
</HTML>
<%@ page contentType="text/html; charset=GBK" %>
<%@ page language="java" %>
<%@ page import="com.mysql.jdbc.Driver" %>
<%@ page import="java.sql.*" %>
<%
response.setContentType("application/xml;charset=GBK");
response.setHeader("Cache-Control", "no-cache");
//驱动程序名
String driverName="org.gjt.mm.mysql.Driver";
//数据库用户名
String userName="root";
//密码
String userPasswd="";
//数据库名
String dbName="";
//表名
String tableName="";
//联结字符串
String url="jdbc:mysql://localhost/"+dbName+"?user="+userName+"&password="+userPasswd+"&useUnicode=true&characerEncoding=GBK";
String key=request.getParameter("names");
response.getWriter().write("<?xml version='1.0' encoding='GBK' ?>");
Class.forName("org.gjt.mm.mysql.Driver").newInstance();
Connection connection=DriverManager.getConnection(url);
Statement statement = connection.createStatement();
String sql="SELECT * FROM "+tableName+" WHERE ht_person_id like '%"+key+"%' ";
ResultSet rs = statement.executeQuery(sql);
//获得数据结果集合
ResultSetMetaData rmeta = rs.getMetaData();
response.getWriter().write("<response>");
String col;
// 输出每一个数据值
while(rs.next()) {
col = new String(rs.getString(2).getBytes("ISO-8859-1"),"GBk");
response.getWriter().write("<res>"+col+"</res>");
}
response.getWriter().write("</response>");
rs.close();
statement.close();
connection.close();
%>
这里要注意与数据库通信的中文字符要统一字符集。
MYSQL对应"8859_1"。