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

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

查看Demo

1
2
3
4
5
/**
 * @author xiaohejun
 * Man Always Remember Love Because of Romance Only.
 * 
 */

一.实现效果：
这里写图片描述

1.serach.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<%@ 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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()函数编码，已经过时

这里写图片描述

emm.坚持原创技术分享，您的支持将鼓励我这个小菜鸡的创作！