代码：
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AJAX实现搜索提示</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<script language="javascript">
function getXMLHTTPRequest() {
var xRequest = null;
if (window.XMLHttpRequest) {
xRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
return xRequest;
}
var xmlhttp;
// 启动AJAX请求
function searchSuggest() {
xmlhttp = getXMLHTTPRequest();
//判断XMLHttpRequest对象是否成功创建
if (!xmlhttp) {
alert("不能创建XMLHttpRequest对象实例");
return false;
}
//创建请求结果处理程序
xmlhttp.onreadystatechange = processReuqest;
var str = document.getElementById("txtSearch").value;
xmlhttp.open("GET", "SuggestServlet?key=" + str, true);
xmlhttp.send(null);
}
// 事件处理函数
function processReuqest() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var sobj = document.getElementById("suggest");
sobj.innerHTML = "";
var str = xmlhttp.responseText.split(",");
var suggest = "";
if (str.length > 0 && str[0].length > 0) {
for (i = 0; i < str.length; i++) {
suggest += "<div onmouseover='javascript:suggestOver(this);'";
suggest += " onmouseout='javascript:suggestOut(this);'";
suggest += " onclick='javascript:setSearch(this.innerHTML);'";
suggest += " class='suggest_link'>" + str[i] + "</div>";
}
sobj.innerHTML = suggest;
document.getElementById("suggest").style.display = "block";
}
else {
document.getElementById("suggest").style.display = "none";
}
}
}
// Mouse over函数
function suggestOver(obj) {
obj.className = "suggest_link_over";
}
//Mouse out函数
function suggestOut(obj) {
obj.className = "suggest_link";
}
//Click函数
function setSearch(value) {
document.getElementById("txtSearch").value = value;
document.getElementById("suggest").innerHTML = "";
document.getElementById("suggest").style.display = "none";
}
</script>
</head>
<body>
<h3>AJAX实现搜索提示</h3>
<div style="width: 500px">
<form action="" id="formSearch">
<input type="text" id="txtSearch" name="txtSearch" onkeyup="searchSuggest()" autocomplete="off" />
<input type="submit" id="cmdSearch" name="cmdSearch" value="搜索" /> <br />
<div id="suggest" style="width: 200px"></div>
</form>
</div>
</body>
</html>
styles.css
@CHARSET "UTF-8";
body {
font: 11px arial;
}
.suggest_link {
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
.suggest_link_over {
background-color: #E8F2FE;
padding: 2px 6px 2px 6px;
}
#suggest {
position: abslute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
display: none;
}
SuggestServlet.java
package com.set;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class SuggestServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private List<String> db = new ArrayList<String>();
public SuggestServlet() {
super();
// 添加搜索提示字符串
db.add("eclipse");
db.add("myeclipse");
db.add("myself");
db.add("java");
db.add("java EE");
db.add("java framework");
db.add("java SE");
}
public void init() throws ServletException {
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
// 获取搜索关键字
String key = request.getParameter("key");
// 模仿从数据库检索数据，rs为以key起头的搜索提示集合
String rs = "";
if (!key.equals("")) {
for (int i = 0; i < db.size(); i++) {
if (db.get(i).startsWith(key)) {
rs = rs + db.get(i) + ",";
}
}
if (!rs.equals("")) {
// 去除末尾的","
rs = rs.substring(0, rs.length() - 1);
}
PrintWriter out = response.getWriter();
out.write(rs);
out.flush();
out.close();
}
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
截图;
