您的位置:首页 > 教程 > AJAX相关 > Ajax实现关键字联想和自动补全功能及遇到坑

Ajax实现关键字联想和自动补全功能及遇到坑

2022-08-05 14:15:50 来源:易采站长站 作者:

Ajax实现关键字联想和自动补全功能及遇到坑

目录
遇到的小坑代码实现前端代码后端代码用到的实体类自己封装的jdbc工具类数据库表:效果展示:

遇到的小坑

    回调函数相对window.onload的摆放位置给回调函数addData传数据时,如何操作才能将数据传进去

    代码实现

    前端代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ajax实现关键字联想和自动补全</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            #keyWords{
                margin-top: 10px;
                margin-left: 10px;
                width: 300px;
                height: 25px;
                font-size: 20px;
                padding-left: 5px;
            }
            #dataDiv{
                background-color: wheat;
                width: 300px;
                margin-left: 10px;
                display: none;
            }
            #dataDiv p{
                padding-left: 10px;
                padding-top: 7px;
                padding-bottom: 3px;
                cursor: pointer;
            }
            #dataDiv p:hover{
                background-color: cornflowerblue;
                color: white;
            }
        </style>
    </head>
    <body>
        <!--
            需求:
                1. 给定文本输入框,显示层,显示层里的显示栏
                2. 当用户在文本框里输入数据时,发生keyup事件时,将文本框里的数据,以ajax请求方式提交的到后端
                3. 后端对前端提交的关键字,在数据库里进行模糊查询
                4. 将后端查询到的数据以json格式传给前端
                5. 前端解析后端传来的数据,将数据显示在提示栏里
                6. 当用户点击提示中的某条提示信息时,将提示栏里的信息赋给输入框,隐藏提示层
                注意:1. 凡是输入框里发生keyup事件时,都要进行ajax请求提交,实时获取提示信息
                     2. 输入框信息为空时,也要隐藏提示层
        -->
        <script>
            window.onload = function (){
                //获取dom对象
                input_txt = document.getElementById("keyWords")
                div_data = document.getElementById("dataDiv")
                //为输入框绑定keyup事件
                input_txt.onkeyup = function (){
                    //输入框为空,隐藏提示层
                    if(this.value.trim() == ""){
                        div_data.style.display = "none"
                    }else{
                        //每当keyup时,发送ajax请求,传递文本框内数据
                        var xmlHttpRequest = new XMLHttpRequest();
                        xmlHttpRequest.onreadystatechange = function (){
                            if(this.readyState == 4){
                                if(this.status == 200){
                                    //解析后端传来的json数据:[{"content" : "data"}, {}, {}]
                                    var jsonArray = JSON.parse(this.responseText)
                                    var html = ""
                                    for(var i = 0; i < jsonArray.length; i++){
                                        var perData = jsonArray[i].content
                                        //为p标签绑定单击事件,将数据以字符串的形式传给回调函数
                                        html += "<p onclick='addData(\""+perData+"\")'>"+perData+"</p>"
                                    }
                                    div_data.innerHTML = html
                                    div_data.style.display = "block"
                                }else{
                                    alert("异常状态码: " + this.status)
                                }
                            }
                        }
                        xmlHttpRequest.open("GET", "/ajax/ajaxAutoComplete?keyWords="+this.value+"", true)
                        xmlHttpRequest.send()
                    }
                }
            }
            function addData(perData){
                //完成自动补全
                input_txt.value= perData
                //隐藏提示层
                div_data.style.display = "none"
            }
        </script>
        <input type="text" id="keyWords">
        <div id="dataDiv">
            <!--
            <p>java</p>
            <p>jsp</p>
            <p>service</p>
            <p>servlet</p>
            <p>docker</p>
            <p>linux</p>
            -->
        </div>
    </body>
    </html>

    后端代码

    package com.examples.ajax.servlet;
    import com.alibaba.fastjson.JSON;
    import com.examples.ajax.beans.KeyWords;
    import com.examples.ajax.utils.DBUtils;
    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;
    import java.util.ArrayList;
    import java.util.List;
    @WebServlet("/ajaxAutoComplete")
    public class AjaxRequest13 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;
            //封装关键字对象
            List<KeyWords> keyWordsList = new ArrayList<>();
            try {
                conn = DBUtils.getConnection();
                String sql = "select content from tb_search where content like ?";
                ps = conn.prepareStatement(sql);
                ps.setString(1, keyWords + "%");
                rs = ps.executeQuery();
                while(rs.next()){
                    String content = rs.getString("content");
                    //封装成关键字对象
                    KeyWords keyWordsObj = new KeyWords(content);
                    //将关键字对象封装
                    keyWordsList.add(keyWordsObj);
                }
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }finally {
                DBUtils.close(conn, ps, rs);
            }
            //后端数据json化
            String jsonKeyWordsArray = JSON.toJSONString(keyWordsList);
            //返回后端数据
            response.getWriter().write(jsonKeyWordsArray);
        }
    }
    

    用到的实体类

    package com.examples.ajax.beans;
    public class KeyWords {
        private String content;
        public KeyWords() {
        }
        public KeyWords(String content) {
            this.content = content;
        }
        public String getContent() {
            return content;
        }
        public void setContent(String content) {
            this.content = content;
        }
    }
    

    自己封装的jdbc工具类

    package com.examples.ajax.utils;
    import java.sql.*;
    import java.util.ResourceBundle;
    /**
     * 封装自己的jdbc工具类
     */
    public class DBUtils {
        static ResourceBundle bundle = ResourceBundle.getBundle("jdbc");
        static String driver;
        static String url;
        static  String username;
        static  String password;
        static {
            driver = bundle.getString("driver");
            url = bundle.getString("url");
            username = bundle.getString("username");
            password = bundle.getString("password");
            try {
                Class.forName(driver);
            } catch (ClassNotFoundException e) {
                throw new RuntimeException(e);
            }
        }
        private DBUtils(){}
        public static Connection getConnection() throws SQLException {
            return DriverManager.getConnection(url, username, password);
        }
        public static void close(Connection conn, PreparedStatement ps, ResultSet rs){
            if(rs != null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    throw new RuntimeException(e);
                }
            }
            if(ps != null){
                try {
                    ps.close();
                } catch (SQLException e) {
                    throw new RuntimeException(e);
                }
            }
            if(conn != null){
                try {
                    conn.close();
                } catch (SQLException e) {
                    throw new RuntimeException(e);
                }
            }
        }
    }
    

    数据库表:

    一张表:>数据表描述: 除了id, 就一个字段 content varchar(255) not null

    效果展示:

    自己在远程数据库上用docker运行了一个mysql数据库,查询速度比较慢,但演示关键字联想和自动补全功能的测试目的已经达到

    到此这篇关于Ajax实现关键字联想和自动补全功能的文章就介绍到这了,更多相关ajax关键字自动补全内容请搜索易采站长站以前的文章或继续浏览下面的相关文章希望大家以后多多支持易采站长站!

    如有侵权,请发邮件到 [email protected]

相关文章

  • ajax请求Session失效问题

    ajax请求Session失效问题

    最近由于一个项目,模块切换为ajax请求数据,当Session失效后,ajax请求后没有返回值,只有响应的html: htmlscript type='text/javascript'window.open('http://192.168.0.118:8080/welcomeAction/loginUI.do','_top
    2019-09-14
  • jquery中AJAX请求 $.post方法的使用

    jquery中AJAX请求 $.post方法的使用

    使用jQuery的$.post方法可以以POST形式向服务器发起AJAX请求。$.post方法是jQuery的实用工具方法。 post和get发送方式的特点, GET 方法提交数据不安全,数据置于请求行,客户端地址栏可见
    2019-09-14
  • Ajax实现文件上传功能(Spring MVC)

    Ajax实现文件上传功能(Spring MVC)

    本文实例为大家分享了Ajax实现文件上传的具体代码,供大家参考,具体内容如下 前端表单 和 JQuery jsp/html代码 使用JQury script src="static/js/jquery-3.4.1.js"/script 前端表单 form id="form-avatar" e
    2020-02-11
  • AJAX实现数据的增删改查操作详解【java后台】

    AJAX实现数据的增删改查操作详解【java后台】

    AJAX实现数据的增删改查操作。,具体如下: 主页:index.html !DOCTYPE htmlhtml head meta charset="UTF-8" title/title script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"/script /head body 编号:input type="text
    2020-06-02
  • React+ajax+java实现上传图片并预览功能

    React+ajax+java实现上传图片并预览功能

    之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图。 由上图,首先点击上面的选择文件,在选择图片之后
    2019-09-14
  • asp+ajax实现静态页面分页的代码

    asp+ajax实现静态页面分页的代码

    最近因工作需要,要在静态页面上实现分页,想了下,决定用AJAX来实现,所以就捣鼓了下面这么个东西,截图如下: 代码如下: html head titleAJAX静态分页/title metahttp-equiv="content-type"conte
    2019-09-14
  • 结合AJAX进行PHP开发之入门

    结合AJAX进行PHP开发之入门

    异步 JavaScript 和 XML(Asynchronous JavaScript and XML,Ajax)无疑是最流行的新 Web 技术。本文中我们将完全使用 PHP 和 Simple Ajax Toolkit (Sajax) 创建一个简单的相册作为在线 Web 应用程序。我们首先
    2019-09-14
  • react axios 跨域访问一个或多个域名问题

    react axios 跨域访问一个或多个域名问题

    1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: "proxy":"http://iot-demo-web-dev.autel.com", //当然,这里是一个假地址 像这样: 这样跨域便完成了,当
    2020-04-28