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

2018-01-02 19:06:02来源:CSDN作者:qq_22027637人点击

分享

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"           onblur="keywordBlur()"<%--onblur:失去鼠标焦点事件--%>           onfocus="getMoreContents()"<%--获得焦点是显示提示框--%>           onkeyup="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>
运行程序:控制台输出:





最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台