Servlet+Ajax实现简易的仿百度搜索框智能提示

最新推荐文章于 2021-03-27 03:56:44 发布

段刘昌

最新推荐文章于 2021-03-27 03:56:44 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/DuanLiuchang/article/details/76165441

版权

Java Web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

search.jsp

<%@ page language="java" import="java.util.*"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type="text/css">

	#mydiv {
		position:absolute;
		left:50%;
		top:50%;
		margin-left:-200px;
		margin-top:-50px;
	}
	
	.mouseOver {
		background:#708090;
		color:#FFFAFA;
	}
	
	.mouseOut {
		background:#FFFAFA;
		color:#000000;
	}

</style>

<script type="text/javascript">

	var xmlHttp;

	// 获得用户输入内容的关联信息的函数
	function getMoreContents() {
		// 首先要获得用户的输入
		var content = document.getElementById("keyword");
		if (content.value == "") {
			clearContent();
			return;
		}
		// 然后要给服务器发送用户输入的内容，因为我们采用的是ajax异步发送数据
		// 所以我们要使用一个对象，叫做XmlHttp对象
		xmlHttp = createXMLHttp();
		// 要给服务器发送数据 escape() 不加的话中文会有问题
		var url = "search?keyword=" + escape(content.value);
		// true表示javascript脚本会在send()方法之后继续执行，而不会等待来自服务器的响应
		xmlHttp.open("GET", url, true);
		// xmlHttp绑定回调方法，这个回调方法会在xmlHttp状态改变的时候被调用
		// xmlHttp的状态0-4 我们只关心4（complete）这个状态
		// 所以说当完成之后，再调用回调方法才有意义
		xmlHttp.onreadystatechange = callback;
		xmlHttp.send(null);
	}
	
	// 获得XmlHttp对象
	function createXMLHttp() {
		// 对于大多数的浏览器都适用
		var xmlHttp;
		if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		}
		// 要考虑浏览器的兼容性
		if (window.ActiveXObject) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			if (!xmlHttp) {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			}
		}
		return xmlHttp;
	}
	
	// 回调函数
	function callback() {
		// 4代表完成
		if (xmlHttp.readyState == 4) {
			// 200代表服务器响应成功
			// 404代表资源未找到，500代表服务器内部错误
			if (xmlHttp.status == 200) {
				// 交互成功，获得相应的数据，是文本格式（JSON）
				var result = xmlHttp.responseText;
				// 解析获得数据
				var json = eval("(" + result + ")")
				// 获得数据之后，就可以动态的显示这些数据了
				// 把这些数据展示到输入框的下面
				setContent(json);
			}
		}
	}
	
	// 设置关联数据的展示，参数代表的是服务器传递过来的关联数据
	function setContent(contents) {
		clearContent();
		// 首先获得关联数据的长度，以此来确定生成多少<tr></tr>
		setLocation();
		var size = contents.length;
		// 设置内容
		for (var i = 0; i < size; i++) {
			var nextNode = contents[i]; // 代表的是JSON格式数据的第i个元素
			var tr = document.createElement("tr");
			var td = document.createElement("td");
			td.setAttribute("border", "0");
			td.setAttribute("bgcolor", "#FFFAFA");
			td.onmouseover = function() {
				this.className = 'mouseOver';
			};
			td.onmouseout = function() {
				this.className = 'mouseOut';
			};
//			td.onclick = function() {
//			};
			// 这个方法实现的是，当用鼠标点击一个关联的数据时
			// 关联数据自动设置为输入框的数据
			// 将关联内容显示在输入框中。而onmousedown执行顺序在input的onblur之前
			// 注意
			// 此处必须使用onmousedown 不能使用onclick
			// onclick = onmousedown + onmouseup
			// onclick点击之后input就会失去焦点，执行清除函数，清空关联内容
			td.onmousedown = function() {
				document.getElementById("keyword").value = this.innerHTML;
			}
			var text = document.createTextNode(nextNode);
			td.appendChild(text);
			tr.appendChild(td);
			document.getElementById("content_table_body").appendChild(tr);
		}
	}
	
	// 清空之前的数据
	function clearContent() {
		var contentTableBody = document.getElementById("content_table_body");
		var size = contentTableBody.childNodes.length;
		for (var i = size - 1; i >= 0; i--) {
			contentTableBody.removeChild(contentTableBody.childNodes[i]);
		}
		document.getElementById("popDiv").style.border = "none";
	}
	
	// 当输入框失去焦点的时候，关联信息清空
	function keywordBlur() {
		clearContent();
	}
	
	// 设置显示关联信息的位置
	function setLocation() {
		// 关联信息的显示位置要和输入框一致
		var content = document.getElementById("keyword");
		// 输入框的宽度
		var width = content.offsetWidth; 
		// 到左边框的距离
		var left = content["offsetLeft"]; 
		// 到顶部的距离
		var top = content["offsetTop"] + content.offsetHeight; 
		// 获得显示数据的div
		var popDiv = document.getElementById("popDiv");
		popDiv.style.border = "black 1px solid";
		popDiv.style.left = left + "px";
		popDiv.style.top = top + "px";
		popDiv.style.width = width + "px";
		document.getElementById("content_table").style.width = width + "px";
	}
	
</script>

<title>Insert title here</title>
</head>
<body>
	<div id="mydiv">
		<!-- 输入框 -->
		<input type="text" size="50" id="keyword" οnkeyup="getMoreContents()" 
			οnblur="keywordBlur()" οnfοcus="getMoreContents()"/>
		<input type="button" value="baidu" />
		<!-- 下面是内容展示的区域 -->
		<div id="popDiv">
			<table id="content_table" bgcolor="#FFFAFA" border="0" cellspacing="0"
				cellpadding="0">
				<tbody id="content_table_body">
					<!-- 动态查询出来的数据显示在这个地方 -->
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>

SearchServlet.java

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

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

import net.sf.json.JSONArray;

public class SearchServlet extends HttpServlet {
	
	static List<String> datas = new ArrayList<String>();
	
	static {
		// 这里是模拟数据
		datas.add("ajax");
		datas.add("ajax post");
		datas.add("becky");
		datas.add("bili");
		datas.add("james");
		datas.add("jerry");
	}
	
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
//		System.out.println("123");
		// 首先获得客户端发送来的数据keyword
		String keyword = request.getParameter("keyword");
		// 获得关键字之后进行处理，得到关联数据
		List<String> listData = getData(keyword);
		// 返回JSON格式
//		System.out.println(JSONArray.fromObject(listData));
		response.getWriter().write(JSONArray.fromObject(listData).toString());
	}
	
	// 获得关联数据的方法
	public List<String> getData(String keyword) {
		List<String> list = new ArrayList<String>();
		for (String data : datas) {
			if (data.contains(keyword)) {
				list.add(data);
			}
		}
		return list;
	}

}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>ajaxtest</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
  	<servlet-name>search</servlet-name>
  	<servlet-class>com.example.SearchServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>search</servlet-name>
  	<url-pattern>/search</url-pattern>
  </servlet-mapping>
</web-app>

http://download.csdn.net/detail/duanliuchang/9911811