Ajax+Servlet实现智能搜索框

技术从心

发布于 2019-08-06 16:41:11

8690

发布于 2019-08-06 16:41:11

前端代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AjaxTest</title>

<style type="text/css">
    #mydiv{
        position:absolute;
        left:50%;
        top:50%;
        margin-left: -250px;
        margin-top: -150px;
    }
    
        .mouseOver{
            background: #708090;
            color:#FFFAFA;
        }
        .mouseOut{
            background: #FFFAFA;
            color:#000;
        }
</style>

<script type="text/javascript">

    var xmlHttp;

    //1.获得用户输入内容的关联信息的函数
    function getMoreContents(){
        //首先获得用户输入
        var content=document.getElementById("keyword")
        if(content.value==""){
            //当输入框为空时，清空之前的数据
            clearContent();
            return;
        }
        //2.然后要给服务器发送用户输入的内容,因为我们采用的是ajax异步发送数据，所以我们要使用xmlHttp对象
        xmlHttp=createXMLHttp();
        //alert(xmlHttp);
        //3.要给服务器发送数据,首先定义一个服务器的地址，
        var url="serach?keyword="+escape(content.value);
        //true表示JavaScript脚本会在send()方法之后继续执行，而不会等待来自服务器的响应。
        xmlHttp.open("GET",url,true);
        
        //xmlHttp绑定回调方法，这个回调方法会在xmlHttp状态改变的时候会被调用
        //xmlHttp的状态：0-4，我们只关心4(complete)这个状态，所以说当完成之后，再调用回调函数才有意义。
        xmlHttp.onreadystatechange = callback;
        //参数已经在url中了，不用在此处添加参数
        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){
            //200代表服务器响应成功，404代表资源未找到，500代表服务器内部错误
            if(xmlHttp.status==200){
                //交互成功，获得相应的数据，是文本格式。
                var result=xmlHttp.responseText;
                //解析获得数据
                var json=eval("("+result+")");
                //获得这些数据之后，就可以动态的显示数据了。把这些数据展示到输入框下面。
                //alert(json);
                setContent(json);
            }
        }
    }
    
    //设置关联数据的展示，参数代表服务器传递过来的关联数据
    function setContent(contents){
        
        //清空之前的数据
        clearContent();
        //设置位置
        setLocation();
        //首先获得关联数据的长度，以此来确定生成多少个<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绑定两个样式（鼠标进入和鼠标移出时事件）
            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;
           };
           
         //鼠标悬浮于关联数据上时，自动添加到输入框中
            /*  td.onmouseover = function(){
                 this.className = 'mouseOver';
                 if(td.innerText != null)
                 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--){
            //指定删除第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.booder="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="50%"/>
        
        <!-- 下面是内容展示的区域 -->
        <div id="popDiv">
            <table id="content_table" bgcolor="#FFFAFA" border="0"  >
                <tbody id="content_table_body">
                    <!-- 动态查询出来的数据 -->
                    
                    
                </tbody>
            </table>
        </div>
        
    </div>
</body>
</html>

后端代码：

package com.java;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
/**
 * 
 * @author 李先森 --2017.2.21
 *
 */
public class SerachServlet extends HttpServlet {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    //定义一个容器,存放模拟数据
    static List<String> datas = new ArrayList<String>();
    static{
        datas.add("ajax");
        datas.add("ajax提交form表单");
        datas.add("ajax教程");
        datas.add("baidu");
        datas.add("bt");
        datas.add("byte");
        datas.add("jstl");
        datas.add("jstsl");
        datas.add("jsatl");
    }
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
    
        //设置字符编码格式
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        //首先获得客户端发送来的数据(keyword)
        String keyword = request.getParameter("keyword");
        //获得关键字之后进行处理，得到关联数据
        List<String> listData = getData(keyword);
        
//        System.out.println(JSONArray.fromObject(listData));
//        JSONArray.fromObject(listData);
        //返回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;
    }
    
}