servlet+ajax实现搜索框的智能提示

1.html代码

<div id="mydiv">
    <input type="text" size="20" id="keyword" onkeyup="getContent()" onblur="keyBlur()" onfocus="getContent()"/>
    <input type="button" value="搜索" width="50px">
    <div id="popdic">
        <table id="contentTable" border="0" cellspacing="0" cellpadding="0">

        </table>
    </div>
</div>

input属性设为onblur，当键盘输入就会触发getContent()函数

ajax向后台传递数据，需要一个xmlHttep对象，由于每个人的浏览器不同所以抽出创建该对象的方法

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

如果data是个字符串，使用  eval("("+data+")")  可以将data转化为json对象，和JSON.parse的功能一样

function getContent() {
            var xmlHttp;
            var content=document.getElementById("keyword");
            if(content.value==""){
                clearContent();
                return;
            }
            xmlHttp=createXmlHttp();
            xmlHttp.onreadystatechange=function () {
                if(xmlHttp.readyState==4&&xmlHttp.status==200){
                    var result=xmlHttp.responseText;
                    var json=eval("("+result+")");
                    setContent(json);
                }
            };
            var url="Sear?keyword="+escape(content.value);
            xmlHttp.open("GET",url,true);
            xmlHttp.send(null);
        }

function createXmlHttp() {
            var xmlHttp;
            if(window.XMLHttpRequest){
                xmlHttp=new XMLHttpRequest();
            }
            if(window.ActiveXObject){
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                if(!xmlHttp){
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                }
            }
            return xmlHttp;
        }

当前台得到json数据之后set到文本框的下面

function setContent(contents) {
            //当输入a之后删除a,再输入b需要将前面的内容删除
            clearContent();
            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.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("contentTable").appendChild(tr);
            }
        }

清除表格信息

        function clearContent() {
            var content=document.getElementById("contentTable");
            var size=content.childNodes.length;
            for(var i=size-1;i>=0;i--){
                content.removeChild(content.childNodes[i]);
            }

        }

当鼠标从文本框移开之后，清除表格信息

function keyBlur() {
            clearContent();
        }

Sear代码

需要json的jar包

一开始建立的javaweb项目，一直有问题，因为项目目录不对，后来换成了maven项目运行成功!

package Test;

import net.sf.json.JSON;
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("/Sear")
public class Sear extends HttpServlet {
    static List<String> list=new ArrayList<>();
    static {

        list.add("ajax");
        list.add("ajacx post");
        list.add("hewenjing");
        list.add("heheheh");
    }
    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");
        String keywords=request.getParameter("keyword");
        List<String> list1=getdata(keywords);
        response.getWriter().write(JSONArray.fromObject(list1).toString());
    }
    public List<String> getdata(String keywords){
        List<String> l=new ArrayList<>();
        for(String data:list){
            if(data.contains(keywords)) {
                l.add(data);
            }
        }
        return l;
    }
}

jsp完整代码

<%--
  Created by IntelliJ IDEA.
  User: hwj
  Date: 18-7-4
  Time: 下午4:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <style type="text/css">
        #mydiv{
            position: absolute;
            left: 50%;
            top:50%;
            margin-top: -150px;
            margin-left: -200px;
        }
        .mouseOver{
            background: #708090;
            color: #FFFAFA;

        }
        .mouseOut{
           background:#FFFAFA;
            color: #000000;
        }
    </style>
    <script type="text/javascript">

        function getContent() {
            var xmlHttp;
            var content=document.getElementById("keyword");
            if(content.value==""){
                clearContent();
                return;
            }
            xmlHttp=createXmlHttp();
            //当请求被发送到服务器时，我们需要执行一些基于响应的任务。
            //每当 readyState 改变时，就会触发 onreadystatechange 事件。
            xmlHttp.onreadystatechange=function () {
                if(xmlHttp.readyState==4&&xmlHttp.status==200){
                    var result=xmlHttp.responseText;
                    var json=eval("("+result+")");
                    setContent(json);
                }
            };
            var url="Sear?keyword="+escape(content.value);
            xmlHttp.open("GET",url,true);
            xmlHttp.send(null);
        }
        function setContent(contents) {
            //当输入a之后删除a,再输入b需要将前面的内容删除
            clearContent();
            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.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("contentTable").appendChild(tr);
            }
        }
        function clearContent() {
            var content=document.getElementById("contentTable");
            var size=content.childNodes.length;
            for(var i=size-1;i>=0;i--){
                content.removeChild(content.childNodes[i]);
            }

        }
        function keyBlur() {
            clearContent();
        }
        function createXmlHttp() {
            var xmlHttp;
            if(window.XMLHttpRequest){
                xmlHttp=new XMLHttpRequest();
            }
            if(window.ActiveXObject){
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                if(!xmlHttp){
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                }
            }
            return xmlHttp;
        }
    </script>
</head>

<div id="mydiv">
    <input type="text" size="20" id="keyword" onkeyup="getContent()" onblur="keyBlur()" onfocus="getContent()"/>
    <input type="button" value="搜索" width="50px">
    <div id="popdic">
        <table id="contentTable" border="0" cellspacing="0" cellpadding="0">

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