ajax+servlet实现百度智能提示搜索框--来自慕课课程

xiaohejun

发布于 2020-02-17 23:33:02

5610

发布于 2020-02-17 23:33:02

文章被收录于专栏：xiaohejun的算法知识分享xiaohejun的算法知识分享

/**
 * @author xiaohejun
 * Man Always Remember Love Because of Romance Only.
 * 
 */

一.实现效果：

1.serach.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>搜索</title>
    <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 == ""){
                return;
            }
            // 然后给服务器发送用户输入类容，用ajax异步发送请求，获得一个对象，骄傲做xmlHttp
            xmlHttp = createXmlHttp();
            // 要给服务器发送数据,escape()方法对字符串进行编码
            var url="search?keyword=" + decodeURI(content.value);
            // 和服务器建立链接,true参数表示javascript脚本会在send()方法之后继续执行，而且不会等待来自服务器的响应
            xmlHttp.open("GET",url);
            // 绑定一个回调方法，这个会调方法会在xmlHttp状态改变0-4，我们只关心4（complete）这个状态，完成之后，调用回调方法
            xmlHttp.onreadystatechange=callback;
            xmlHttp.send(null);
        }

        // 清空之前的数据
        function clearContent() {
            var tbody = document.getElementById("content_table_body");
            var size = tbody.childNodes.length;
            for (var i = size-1; i >= 0;i--) {
                tbody.removeChild(tbody.childNodes[i]);
            }
            document.getElementById("popDiv").style.border = "none";
        }

        //回调函数
        function callback() {

            if(xmlHttp.readyState==4){
                // 服务器响应成功
                if(xmlHttp.status==200){
                    // 交互成功，获得响应数据
                    var result = xmlHttp.responseText;
                    // 解析成JSON格式
                    var json = eval("("+result+")");
                    // 获得数据之后，就可以动态显示这些数据，把这些数据展示到输入框的下面
                    setContent(json);
                }
            }
        }
        // 设置关联数据的展示
        function setContent(contents) {

            clearContent();
            setLocation();
            var size = contents.length;
            for (var i = 0; i < size; i++) {
                var nextNode = contents[i];
                var tr = document.createElement("tr");
                var td = document.createElement("td");
                td.setAttribute("border","0");
                td.bgColor = "white";
                td.onmouseover = function () {
                    this.className = 'mouseOver';
                };
                td.onmouseout = function () {
                    this.className = 'mouseOut';
                }
                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);
            }
        }
        // 获得xmlHttp对象
        function createXmlHttp() {
            // 对于大多数浏览器适用的
            var xmlHttp;
            if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            }
            // 要考虑浏览器的兼容
            if (window.ActiveXObiect) {
                xmlHttp = new ActiveXObiect("Microsoft.XMLHTTP");
                if (!xmlHttp) {
                    xmlHttp = new ActiveXObiect("Msxml2.XMLHTTP");
                }
            }
            return xmlHttp;
        }

        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>
</head>
<body>
<div id="myDiv">
    <!-- 输入框 -->
    <input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="getMoreContents()"/>
    <input type="button" value="百度一下" width="50px"/>
    <!-- 内容展示的区域 -->
    <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>

2.SearchServlet.java

package com.servlet;


import java.io.IOException;
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;

import net.sf.json.JSONArray;

/**
 * Servlet implementation class search
 */
@WebServlet("/search")
public class SearchServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
    private static List<String> datas;
    /**
     * @see HttpServlet#HttpServlet()
     */
    public SearchServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
    static {
    	datas  = new ArrayList<String>();
    	datas.add("ajax");
    	datas.add("ajax post");
    	datas.add("b啊哈");
    	datas.add("b哈");
    	datas.add("这是ajax");
    	datas.add("你全家都是ajax");
    }
    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;
	}
    
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ 
		response.setCharacterEncoding("UTF-8");
		request.setCharacterEncoding("UTF-8");;
		String keyword = request.getParameter("keyword");
		List<String> listData = getData(keyword);
		response.getWriter().write(JSONArray.fromObject(listData).toString());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

注意：不可以使用escape()函数编码，已经过时