servlet+ajax搜索智能提示demo(原生js)

最新推荐文章于 2021-08-05 13:47:15 发布

u_ian

最新推荐文章于 2021-08-05 13:47:15 发布

阅读量209

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/u_ian/article/details/78489161

版权

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<!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();
// 			alert(xmlHttp);
			var url="${path}/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){//请求完成
				if(xmlHttp.status==200){ //访问成功
					//交互成功，获得响应的数据，是文本格式
					var result=xmlHttp.responseText;  
					//解析获得数据
					var json=eval("("+result+")");
					//展示数据在输入框下面
// 					alert(json);
					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","#66ccff");
				td.οnmοuseοver=function(){
					this.className='mouseOver';
				};
				td.οnmοuseοut=function(){
					this.className='mouseOut';
				};
				td.οnclick=function(){
					//当用鼠标点击一个关联数据时，关联数据自动设置为输入框的数据
					document.getElementById("keyword").value=this.innerText;
				}
				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]);
			}
		}
		
		//当输入框失去焦点的时候，关联信息清空
		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";
			 document.getElementById("content_table").style.width=width+"px";  
		}
	</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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="百度一下" width="50px">
		<!-- 下面是内容展示的区域 -->
		<div id="popDiv">
			<table id="content_table" bgcolor="#66ccff" border="0" cellpadding="0" cellspacing="0">
				<tbody id="content_table_body">
<!-- 					动态查询出来的数据显示在这个地方? -->
<!-- 					<tr><td>丢你蕾姆</td></tr> -->
<!-- 					<tr><td>丢你拉姆</td></tr> -->
<!-- 					<tr><td>丢你emt</td></tr> -->
<!-- 					<tr><td>丢你486</td></tr> -->
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>

后端代码

package com.zzz;

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;

@SuppressWarnings("serial")
public class SerchServlet extends HttpServlet{
	
 	static List<String> datas = new ArrayList<String>();
	static{
		//这是模拟数据
		datas.add("aa1");
		datas.add("aa2");
		datas.add("bb1");
		datas.add("cc");
		datas.add("dd");
		datas.add("ff");
	}

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("进来");
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		//首先获得客户端发送来的数据keyword
		String keyword = request.getParameter("keyword");
		//获得关键字之后记性处理，得到关联数据
		List<String> listData = getData(keyword);
		//返回Json格式
		System.out.println(JSONArray.fromObject(listData).toString());
		response.getWriter().write(JSONArray.fromObject(listData).toString());
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	
	//获得关联数据的方法
	public List<String> getData(String keyword) {
		
		List<String> list = new ArrayList<String>();
		
		for(String data:datas) {
			if(data.contains(keyword)) {
				list.add(data);
			}
		}
		//返回Json格式
		
		return list;
	}
	
}