Servlet+Ajax实现智能搜索提示框

最新推荐文章于 2020-07-24 11:34:58 发布

zghgchao

最新推荐文章于 2020-07-24 11:34:58 发布

阅读量337

点赞数

文章标签： java Servlet Ajax

本文链接：https://blog.csdn.net/qq_22027637/article/details/78948744

版权

Maven构建项目

pom.xml中依赖引入

<dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.1</version>
        </dependency>
        <dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.4</version>
            <classifier>jdk15</classifier>
        </dependency>

搜索框页面 servlet.jsp

<%@page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<html>
<head>
    <style type="text/css">
        #mydiv {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -50px;
        }

        .mouseOver {
            background: #708090;
            color: #FFFAFA;
        }

        .mourseOut {
            background: #FFFAFA;
            color: #000000;
        }


    </style>

</head>

<body>
<div id="mydiv">
    <%--输入框--%>
    <input type="text" size="50" id="keyword"
           οnblur="keywordBlur()"<%--onblur：失去鼠标焦点事件--%>
           οnfοcus="getMoreContents()"<%--获得焦点是显示提示框--%>
           οnkeyup="getMoreContents()"/><%--onkeyup：键盘放下触发事件--%>
    <input type="button" value="百度一下" width="50px"/>

    <div id="popDiv">
        <table id="content_table" bgcolor="#f0f8ff" border="0" cellspacing="0" cellpadding="0">
            <tbody id="content_table_body">
            <%--动态查询出来的数据显示在这里--%>
            <%--<tr><td>ajax</td></tr>
            <tr><td>ajax</td></tr>
            <tr><td>ajax</td></tr>
            <tr><td>ajax</td></tr>--%>
            </tbody>
        </table>
    </div>

</div>
<script type="text/javascript">

    var xmlHttp;

    //获取用户输入内容的关联信息的函数
    function getMoreContents() {
        //1.首先要获得用户的输入
        var content = document.getElementById("keyword");
        if (content.value == "") {
            clearContent();//按“Backspace”键时,清空提示框
            return;
        }
//            alert(content.value)
        //2.然后要给服务器发送用户输入的内容，因为我们采用的是Ajax异步发送数据，所有我们要使用一个对象，叫做XmlHttp对象
        xmlHttp = createXmlHttp();
//            alert(xmlHttp)
        //3.要给服务器发送数据
        var url = "search?keyword=" + escape(content.value);
        /*escape(content.value)：不加的话中文可能有问题*/
        //true表示JavaScript脚本会在send()方法之后继续执行，而不会等待来自服务器的响应
        xmlHttp.open("GET", url, true);
        //4.xmlHttp绑定回掉方法，这个回掉方法会在xmlHttp状态改变的时候被调用
        //xmlHttp的状态0-4，我们只关心4（complete）这个状态，当完成之后，在调用回调方法才有意义
        xmlHttp.onreadystatechange = callback;
        xmlHttp.send(null);

    }

    //获得xmlHttp对象
    function createXmlHttp() {
        //对于大多数的浏览器都适用
        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"代表服务器响应成功
            if (xmlHttp.status == 200) {
                //交互成功，获得相应的数据，是文本格式
                var result = xmlHttp.responseText;
                //解析获得的数据  java中的json和JS中的json有差别
                var json = eval("(" + result + ")");
                //5.获得数据之后，动态的显示这些数据，把其展示到输入框的下面
//                alert(json);
                setContent(json);
            }
        }
    }

    //设置关联数据的展示，参数代表的是服务器传递过来的关联数据
    function setContent(contents) {
        //先清空内容
        clearContent();

        setLocaltion();

        //首先获得关联数据的长度，以此来确定生成多少<tr></tr>
        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.onmousemove = function () {/*鼠标滑过事件*/
                this.className = 'mouseOver';
            }
            td.onmouseout = function () {/*鼠标滑出事件*/
                this.className = 'onmouseOut';
            }
            td.onclick = function () {
                //当用鼠标点击一个关联的数据时，关联数据自动设置为输入框的数据

            }
            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 setLocaltion() {
        //关联信息的显示位置要和输入框一致
        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>

</body>
</html>

服务端 SearchServlet.java

package com.search;

import net.sf.json.JSONArray;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

/**
 * Created by zghgchao 2017/12/30 15:03
 */
public class SearchServlet extends HttpServlet {
    static List<String> datas = new ArrayList<String>();

    static {
        //模拟数据
        datas.add("ajax");
        datas.add("ajax post");
        datas.add("ajax get");
        datas.add("bill");
        datas.add("becky");
        datas.add("james");
        datas.add("jerry");
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        System.out.println("-------------请求服务器-------------");
        //首先获得客户端发送来的数据keyword
        String keyword = req.getParameter("keyword");
        //获得关键字之后进行处理，得到关联数据
        List<String> listData = getData(keyword);
        //返回JSON格式
        System.out.println(JSONArray.fromObject(listData));
        JSONArray jsonArray = JSONArray.fromObject(listData);
        resp.getWriter().write(jsonArray.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

<web-app>
    <display-name>Archetype Created Web Application</display-name>
    <servlet>
        <servlet-name>search</servlet-name>
        <servlet-class>com.search.SearchServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>search</servlet-name>
        <url-pattern>/search</url-pattern>
    </servlet-mapping>
</web-app>

运行程序：

控制台输出：