使用ajax实现百度下拉提示框

百度下拉提示框

在使用百度搜索时，在输入框中输入部分文字后，下面会将与该文字相关的词组展示出来，该功能就可以使用ajax来实现。 注册输入框的onkeyup事件，该事件触发时，将输入框中填写的内容使用ajax发送到servlet中，在servlet中根据用户的输入去数据库中查询，之后将查询出的数据再发送给前台中，最后将该数据展示在页面即可。

代码示例：

定义html：

<!-- 用户输入框 -->
<div id="divsearch">
        <input type="text" name="name" id="name" />
        <input type="submit" value="搜索">

</div>
<!-- 下拉提示框 -->
<div id="tips"
    style="display: none; border: 1px solid red; background-color: white; width: 128px; top: 135px;">

</div>

在html中编写javascript代码：

<script>

    $(function() {
        //监听input输入的变化
        $("#name").on("input propertychange",function () {
            let div = $("#tips");
            if (this.value == "") {
                //如果没有输入数据则将下拉框隐藏
                div.css("display", "none");
            }
            $.ajax({
                url:"/search" , //请求路径
                type:"get" , //请求方式
                data:{"name":this.value},//请求参数
                dataType:"text",//设置接受到的响应数据的格式
                //回调函数
                success:function (data) {
                    if (data == "") {
                        return;
                    }
                    let childDiv = "";

                    //按照，分割字符串
                    let result = data.split(",");
                    //遍历将html标签拼接放到div中
                    for (r of result) {
                        childDiv += "<div onclick='writeText(this)' onmouseover='changeBackground_over(this)' onmouseout='changeBackground_out(this)'>"+ r +"</div>";
                    }

                    //将拼接好的数据放到div中
                    div.html(childDiv);
                    //将div展示
                    div.css("display","block");
                },
                error:function (aa) {
                    console.log("出错啦...")
                }//表示如果请求响应出现错误，会执行的这个回调函数

            });
        });
    });

    //鼠标悬浮时，改变背景色
    function changeBackground_over(div){
        div.style.backgroundColor = "orange";
    }
    //鼠标离开时，恢复背景色
    function changeBackground_out(div){
        div.style.backgroundColor = "";
    }

    //将文本填充到搜索框
    function writeText(div){
        //得到搜索框
        let searchElement = document.getElementById("name");
        searchElement.value = div.innerHTML;//把div中的文本添加到搜索框中
        div.parentNode.style.display="none";//把context1的div隐藏
    }
</script>

编写servlet用来接收ajax请求并查询数据，这里简化下不去数据库中查询，而是自己构建一个List，将该List作为查询的结果返回给前台：

package com.monkey1024.servlet;

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;

/**
 * 查询
 */
@WebServlet("/search")
public class SearchServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

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

        String name = request.getParameter("name");

        //根据用户输入的数据去查询数据库，这里省略数据库查询操作，手动编写一个List结果集
        List<String> result = new ArrayList<>();
        result.add("m1");
        result.add("m2");
        result.add("m3");
        result.add("m4");
        result.add("m5");

        //把集合中的数据转换为字符串返回到网页
        String str = "";
        //如果用户输入的内容是以m开头的话，则将数据返回
        if(name.startsWith("m")){
            for (int i = 0; i < result.size(); i++) {
                if(i>0){
                    str+=",";
                }
                str+=result.get(i);
            }
        }

        System.out.println(str);
        //把数据响应到客户端
        response.getWriter().write(str);
    }

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

}