ajax搜索提示框

古城微笑少年丶 2022-06-12 08:38 219阅读 0赞

### jsp ###

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <style> .mouseOver{ background: #708090; color:#FFFAFA; } .mouseOut{ background: FFFAFA； color#000000; } </style>
    <script type="text/javascript"> //创建xmlHttp function getMoreContens() { var xmlHttp; var content = document.getElementById("keyword").value; if (content == ""){ alert('为空'); clearContent(); return ; } //输入框由内容 ， 创建xml对象 xmlHttp = createXmlHttp(); //alert(conten+xmlHttp); //发送到服务器 var url = "servlet?keyword="+content; //以get方式将参数带到servlet中 xmlHttp.open("GET",url, true); xmlHttp.send(null); xmlHttp.onreadystatechange = function callback() { if(xmlHttp.readyState == 4 && xmlHttp.status == 200) //响应完成 且成功 { //获取文本信息 var result = xmlHttp.responseText; //由服务器返回的信息 //解析获得的数据 var json = eval("("+result+")"); //进行解析 //获取到 了 后台的数据alert(json); setContent(json) } }; //设置显示的数据 function setContent(contents){ 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"); tr.setAttribute("border", 0); tr.setAttribute("bgcolor", "#FFFAFA"); td.setAttribute("width", "200px"); //鼠标对td的事件 td.onmouseover=function(){ this.className = 'mouseOver'; }; td.onmouseout=function(){ this.className = 'mouseOut'; }; td.onclick=function(){ //当鼠标点击数据自动显示在输入框 }; var text = document.createTextNode(nextNode); td.appendChild(text); //文本放进td tr.appendChild(td); //td放进tr document.getElementById("content_table_body").appendChild(tr); } }; } //清空之气那的数据 function clearContent(){ //得到tablebody 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]); } }; //输入框失去焦点 function keywordBlur(){ clearContent(); } //创建xml对象 function createXmlHttp() { var xmlHttp; if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } //兼容IE else if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); if(!xmlHttp) { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } } return xmlHttp; } </script>
    
      </head>
    
      <body>
        <div>
            <input type="text" name="keyword" id="keyword" onkeyup="getMoreContens()" onblur="keywordBlur()" onfocus="getMoreContens()">
            <button>百度一下</button>
    
            <div id="popDiv""> <table id="content_table" bgcolor="#FFFAFA" border="0" cellspacing="0">
                    <tbody id="content_table_body">
                        
                    </tbody>
                </table>
            </div>
        </div>
      </body>
    </html>

### select ###

package ajax;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    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;
    
    public class Servlet extends HttpServlet { 
        static List<String> datas = new ArrayList<String>();
        static{
            datas.add("app");
            datas.add("add");
            datas.add("boy");
            datas.add("book");
            datas.add("cat");
            datas.add("ccc");
        }
        public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            response.setCharacterEncoding("utf-8");
    
            //获取客户端发送过来的数据
            String keyword = request.getParameter("keyword");
            System.out.println("keyword="+keyword);
            //得到关联数据
            List<String> listData = getData(keyword);
    
            //返回json格式
            JSONArray.fromObject(listData);
    
            System.out.println("json"+JSONArray.fromObject(listData));
    
            //传到前台
            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;
        }
    
    }

### web.xml ###

<?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
      <display-name>ajax</display-name>
      <servlet>
        <description>This is the description of my J2EE component</description>
        <display-name>This is the display name of my J2EE component</display-name>
        <servlet-name>Servlet</servlet-name>
        <servlet-class>ajax.Servlet</servlet-class>
      </servlet>
    
      <servlet-mapping>
        <servlet-name>Servlet</servlet-name>
        <url-pattern>/servlet</url-pattern>
      </servlet-mapping>
      <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
      </welcome-file-list>
    </web-app>