servlet+ajax实现搜索框的显示

最新推荐文章于 2024-06-04 00:22:57 发布

南风几经秋-

最新推荐文章于 2024-06-04 00:22:57 发布

阅读量262

点赞数

分类专栏：学习总结

学习总结专栏收录该内容

19 篇文章 1 订阅

订阅专栏

页面代码：

<%@ page contentType="text/html;charset=UTF-8" import="java.util.*" language="java" %>
<html>
<head>
    <title>搜索框的实现</title>
    <style type="text/css">
        #mydiv{
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-200px;
            margin-top: -50px;
        }
        .mouseOver{
            background-color: #708090;
            color: #FFFAFA;
        }
        .mouseOut{
            background-color:#FFFAFA;
            color:#000000;
        }
    </style>

    <script type="text/javascript">
        //定义全局变量
        var xmlHttp;
        //获得用户输入内容的关联信息的函数
        function getMoreContents(){
            //首先获得用户的输入
            var content= document.getElementById("keyword");
            console.log(content);
            if(content.value==""){
                //当输入框为空时，清空之前的数据
                clearContent();
                return;
            }
            //给服务器发送用户输入的内容，因为我们采用的是ajax异步发送数据
            //所以我们要是用以对象叫做xmlHttp对象
            xmlHttp=createXMLHttp();
            //要给服务器发送数据
            var url="search?keyword="+escape(content.value);
            //true表示JavaScript脚本之后继续执行，而不是等待服务器的响应
            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");
                //如果xmlHttp没有弹出来,就换一个对象
                if(!xmlHttp){
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                }
            }
            return xmlHttp;
        }

        //回调函数
        function callback(){
            //4代表完成
            if(xmlHttp.readyState==4){
                //xmlHttp==200代表服务器未响应成功
                //==404代表资源未找到，500代表服务器内部错误
                if(xmlHttp.status==200){
                    //交互成功，获得响应数据，是文本格式
                    var result=xmlHttp.responseText;
                    //获得数据 ,java和JavaScript认识json大部分相同，但还是有一点不同，
                    //在JavaScript中在外面必须加上 括号，JavaScript才认识json
                    var json=eval("("+result+")");
                    //获得数据之后就可以动态的显示的这些数据了，把这些数据展示到
                    //输入框的下面
                    // alert(json);
                    setContent(json);

                }
            }
        }
        function setContent(contents){
            //清空之前的数据
            clearContent();
            //设置位置
            setLocation();
            //首先确定获得关联数据的长度，以此来确认生成多少<tr><td>
            var size=contents.length;
            //设置内容
            for(var i=0;i<size;i++){
                //代表的是json格式数据的第i个数据
                var nextNode=contents[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(){
                    //这个方法实现的是，当用鼠标点击一个环链的数据时，关联数据自动设置为输入框的数据
                    // document.getElementById("keyword").value =this.innerText;

                };*/
                td.onmousedown = function(){
                    //当鼠标点击一个关联数据时，自动在输入框添加数据
                    document.getElementById("keyword").value =this.innerText;
                };
                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;//到顶部的距离
            //获得显示数据的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">
    <%--输入框,onkeyup是用户释放键盘按钮时就让他执行关联信息的方法，--%>
        <%--<form action="com.imooc/SearchServlet" method="post">--%>

        <input type="text" size="50" id="keyword" name="keyword" onkeyup="getMoreContents()"
               onblur="keywordBlur()" onfocus="getMoreContents()"/>
        <input type="button" value="百度一下" width="50px" />

        <%--下面就是展示的数据--%>
    <div id="popDiv">
        <table id="content_table" bgcolor="#FFFAFA" border="0" cellspaceing="0" cellpaddign="0">
           <tbody id="content_table_body">

            <%--&lt;%&ndash;动态查询出来的数据显示在这个地方&ndash;%&gt;--%>
            <%--<tr><td>ajax</td></tr>--%>
            <%--<tr><td>ajax1</td></tr>--%>
            <%--<tr><td>ajax2</td></tr>--%>

           </tbody>
        </table>

    </div>
</div>
</body>
</html>

后台：

package com.imooc;

import net.sf.json.JSONArray;

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

@WebServlet(name = "SearchServlet")
public class SearchServlet extends HttpServlet {
    static List<String>  datas=new ArrayList<String>();
    static{
        datas.add("ajax");
        datas.add("ajaxb post");
        datas.add("becky");
        datas.add("bill");
        datas.add("bill3");
        datas.add("bill2");
        datas.add("james");
        datas.add("jerry");
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        //首先获得客户端发送来的数据keyword
        String keyword=request.getParameter("keyword");
        System.out.println("关键字："+keyword);
        //获得关键字之后进行处理，得到关联数据
        List<String> listData=getData(keyword);
        //返回json格式
        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;
    }
}

南风几经秋-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
servlet+ajax实现搜索框的显示

页面代码：<%@ page contentType="text/html;charset=UTF-8" import="java.util.*" language="java" %><html><head> <title>搜索框的实现</title> <style type="text/css">...
复制链接

扫一扫

专栏目录