Ajax搜索自动提示

2016-12-22 21:18:28来源:CSDN作者:linhaiyun_ytdx人点击

第七城市

 代码:

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);	}}

截图;


第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台