Ajax搜索自动提示

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,IOException {
		doGet(request,response);
	}

}

截图;

Ajax搜索自动提示

猜你在找的Ajax相关文章