淘先锋技术网

首页 1 2 3 4 5 6 7

AJAX搜索自动提示

首页（ajax.jsp）

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/8/9
  Time: 18:29
  To change this template use File | Settings | File Templates.
  求精要诀P358
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>搜索自动提示</title>

    <link rel="stylesheet" type="text/css" href="./styles.css" target="_blank" rel="external nofollow" >
    <script language="javascript">
        function getXMLHTTPRequest() {
            //根据浏览器不同获取XMLHttpRequest对象
            var xRequest = null;
            if (window.XMLHttpRequest) {
                xRequest = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                xRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xRequest;
        }

        var xmlhttp;
        // 启动AJAX请求
        function searchSuggest() {
            xmlhttp = getXMLHTTPRequest();
            //判断XMLHttpRequest对象是否成功创建
            if (!xmlhttp) {
                alert("不能创建XMLHttpRequest对象实例");
                return false;
            }
            //创建请求结果处理程序
            //回调函数
            xmlhttp.onreadystatechange = processReuqest;
            var str = document.getElementById("txtSearch").value;

            //get方式发出请求，请求地址带有参数，也就是调用SuggestServlet.java(服务端)
            xmlhttp.open("GET", "Suggest?key=" + str, true);
            xmlhttp.send(null);
        }
        // 事件处理函数
        function processReuqest() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var sobj = document.getElementById("suggest");
                sobj.innerHTML = "";
                var str = xmlhttp.responseText.split(",");
                var suggest = "";
                if (str.length > 0 && str[0].length > 0) {
                    for (i = 0; i < str.length; i++) {
                        suggest += "<div onmouseover='javascript:suggestOver(this);'";
                        suggest += " onmouseout='javascript:suggestOut(this);'";
                        suggest += " onclick='javascript:setSearch(this.innerHTML);'";
                        suggest += " class='suggest_link'>" + str[i] + "</div>";
                    }
                    sobj.innerHTML = suggest;
                    document.getElementById("suggest").style.display = "block";
                } else {
                    document.getElementById("suggest").style.display = "none";
                }
            }

        }
        // Mouse over函数
        function suggestOver(obj) {
            obj.className = "suggest_link_over";
        }
        //Mouse out函数
        function suggestOut(obj) {
            obj.className = "suggest_link";
        }
        //Click函数
        function setSearch(value) {
            document.getElementById("txtSearch").value = value;
            document.getElementById("suggest").innerHTML = "";
            document.getElementById("suggest").style.display = "none";
        }
    </script>
</head>

<body>
<h3>AJAX实现搜索提示</h3>
<div style="width: 500px">
    <form action="" id="formSearch">
        <input type="text" id="txtSearch" name="txtSearch" onkeyup="searchSuggest()" autocomplete="off" />

        <input type="submit" id="cmdSearch"name="cmdSearch" value="搜索" /> <br />

        <div id="suggest" style="width: 158px ;padding: 0px"></div>
    </form>
</div>
</body>
</html>

服务端（SuggestServlet.java）

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

@WebServlet( "/Suggest")
public class SuggestServlet extends HttpServlet {

   private List<String> db=new ArrayList<String>();

   public SuggestServlet(){
       super();
       db.add("eclipse");
       db.add("myeclipse");
       db.add("java");
       db.add("javaweb");
       db.add("javaee");

   }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


       //设置编码
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        response.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
        //获取搜索关键字
        String key=request.getParameter("key");
        //模仿从数据库检索数据
        String rs="";
        if(!key.equals("")){
            for (int i=0;i<db.size();i++){
                if (db.get(i).startsWith(key)){
                    rs=rs+db.get(i)+",";
                }
            }
        }
        if (!rs.equals("")){
            //去除末尾的","
            rs=rs.substring(0,rs.length()-1);
            out.write(rs);
            out.flush();
            out.close();
        }


    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doPost(request, response);
    }
}

CSS样式

@CHARSET "UTF-8";
body {
	font: 16px arial;
}

.suggest_link {
	background-color: #ffffff;
	padding: 2px 6px 2px 6px;
}

.suggest_link_over {
	background-color: #e5e5e5;
	padding: 2px 6px 2px 6px;
}

#suggest {
	position: absolute;
	background-color: #FFFFFF;
	text-align: left;
	border: 2px solid #bebebe;
	display: none;
}

3、结果展示

在这里插入图片描述

4、整理过程

在这里插入图片描述