Ajax——Ajax实现自动补全

最新推荐文章于 2022-10-16 21:09:48 发布

皮皮皮皮皮皮皮卡乒

最新推荐文章于 2022-10-16 21:09:48 发布

阅读量922

点赞数 1

分类专栏： # Ajax # JavaWeb 文章标签： ajax javascript ecmascript

本文链接：https://blog.csdn.net/weixin_44606952/article/details/126452206

版权

JavaWeb 同时被 2 个专栏收录

28 篇文章 2 订阅

订阅专栏

Ajax

6 篇文章 0 订阅

订阅专栏

说明：
本篇文章主要总结的是：利用Ajax实现搜索框的自动补全功能，即：用户输入数据之后，服务器前往数据库中查询用户输入的类似的数据，并且展示在搜索框下方，当用户点击查询列表时可以将对应的内容设置到搜索框中。

1. 搜索联想，自动补全概述

百度是一个很典型的代表。在百度的搜索框中输入相关信息的时候，会有搜索联想以及自动补全。
搜索联想和自动补全：实际上是为了方便用户的使用。让用户的体验更好。
搜索联想：当用户输入一些单词之后，自动联想出用户要搜索的信息，给一个提示。
自动补全：当联想出一些内容之后，用户点击某个联想的单词，然后将这个单词自动补全到搜索框当中。
搜索联想和自动补全功能，因为是页面局部刷新效果，所以需要使用ajax请求来完成。

2. 自动补全功能实现原理

当键盘事件发生之后，比如：keyup：键弹起事件。
发送ajax请求，请求中提交用户输入的搜索内容，例如：北京（发送ajax请求，携带“北京”两个字）
后端接收到ajax请求，接收到“北京”两个字，执行select语句进行模糊查询。返回查询结果。
将查询结果封装成json格式的字符串，将json格式的字符串响应到前端。
前端接收到json格式的字符串之后，解析这个json字符串，动态展示页面。

3. 自动补全功能代码实现

前端代码：包括了文本框，显示联想内容的div，数据样式，发送Ajax请求，处理响应的数据…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax实现搜索和自动补全</title>
    <style type="text/css">
        .userInput{
            width: 300px;
            height: 25px;
            font-size: 15px;/*字体大小设置*/
            padding-left: 6px;/*内补丁*/
        }
        .showData{
            width: 309px;
            border: 1px solid black;
            background: sandybrown;
            display: none;
        }

        .showData p{
            padding-left: 5px;
            margin-top: 2px;
            margin-bottom: 3px;
        }

        .showData p:hover{
            cursor: pointer;
            border: 1px blue solid ;
            background-color: burlywood;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    window.onload = function (){
        document.getElementById("keywords").onkeyup = function () {//绑定文本框键盘弹起事件

            if (this.value == ""){
                document.getElementById("showData").style.display = "none"
            }else {
                //this表示的是文本框，因此this.value表示的就是文本框中的数据
                //1.创建XMLHttpRequest核心对象
                var xmlHttpRequest = new XMLHttpRequest();
                //2.注册回调函数
                xmlHttpRequest.onreadystatechange = function () {
                    if (xmlHttpRequest.readyState == 4) {
                        if (xmlHttpRequest.status >= 200 && xmlHttpRequest.status < 300) {
                            const json = JSON.parse(xmlHttpRequest.responseText);
                            let html = ""
                            for (var i = 0; i < json.length; i++) {
                                html += "<p οnclick='setInput(\""+json[i].content+"\")'>"+json[i].content+"</p>"
                            }

                            document.getElementById("showData").innerHTML = html
                            document.getElementById("showData").style.display = "block"
                        }
                    }
                }
                //3.打开通道
                xmlHttpRequest.open("GET","/ajax_autocomplete/query?t="+new Date().getTime()+"&keywords="+this.value,true)
                //4.发送数据
                xmlHttpRequest.send()
            }
        }
    }

    function setInput(content){
        document.getElementById("keywords").value = content
        document.getElementById("showData").style.display = "none"
    }
</script>

<input type="text" class="userInput" id="keywords">
<div class="showData" id="showData">
    <p>郑州天气</p>
    <P>郑州720特大暴雨</P>
    <p>郑州地铁</p>
    <p>郑州人</p>
</div>
</body>
</html>

后端代码：包括连接数据库，数据查询，结果集处理，响应数据到前端…

package com.lcl.ajax.servlet;

import com.lcl.ajax.util.DBUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

/**
 * @Author Administration
 * @PackageName NewWeb
 * @Package com.lcl.ajax.servlet
 * @Date 2022/8/21 15:50
 * @Description:
 */
@WebServlet("/query")
public class QueryServlet extends HttpServlet {

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

        //获取用户输入的数据
        String keywords = request.getParameter("keywords");

        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        StringBuilder sb = new StringBuilder();

        try {
            conn = DBUtil.getConnection();
            String sql = "select content from t_ajax where content like ?";
            ps = conn.prepareStatement(sql);
            ps.setString(1, keywords + "%");
            rs = ps.executeQuery();
            //[{"content":"javaweb"},{"content":"java"}]
            sb.append("[");
            while (rs.next()) {
                String content = rs.getString("content");
                sb.append("{\"content\":\"" + content + "\"},");
            }

        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(conn, ps, rs);
        }
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().print(sb.substring(0, sb.length() - 1) + "]");
    }
}

实现效果展示

<1>输入数据后，自动联想
在这里插入图片描述
<2>用户点击时可以更新用户选择的数据

<3>点击内容自动填补文本框

在这里插入图片描述

皮皮皮皮皮皮皮卡乒

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax——Ajax实现自动补全

本篇文章主要总结的是：利用Ajax实现搜索框的自动补全功能，即：用户输入数据之后，服务器前往数据库中查询用户输入的类似的数据，并且展示在搜索框下方，当用户点击查询列表时可以将对应的内容设置到搜索框中。
复制链接

扫一扫