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

来源：互联网发布：core java mobi 编辑：程序博客网时间：2024/06/14 07:47

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; // 获得显示数据的divvar 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" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="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");}@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");//System.out.println("123");// 首先获得客户端发送来的数据keywordString 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

阅读全文

0 0