用ajax实现关键字联想和自动补全

遇到的小坑

  1. 回调函数相对window.onload的摆放位置
  2. 给回调函数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);

            }

        }

    }

}

用到的依赖:不再赘述

数据库表:

一张表: tb_search

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

效果展示:

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









ajax04_实现关键字联想和自动补全的更多相关文章

  1. mysql自动补全功能（只能用于表/列 名）

    关键字:mysql自动补全,auto-rehash 注:只能补齐表,列名,使用tab进行补全操作 一.修改my.cnf vi /etc/my.cnf [mysql] auto-rehash #添加au ...

  2. IDEA 代码自动补全/自动联想 功能

    IDEA 的代码补全/自动联想功能,可以仅仅输入几个字母,自动补全一整段代码,非常舒服. 代码自动联想功能在 设置 -> Editor -> Live Templates 查看,很多都非常 ...

  3. Eclipse Code Recommenders 自动补全(联想)神器

    Eclipse Code Recommenders 可以在eclipse市场中下载.自动补全.模糊匹配.非常有用!

  4. Vim自动补全神器–YouCompleteMe

    YouCompleteMe的特别之处 基于语义补全 总所周知,Vim是一款文本编辑器.也就是说,其最基础的工作就是编辑文本,而不管该文本的内容是什么.在Vim被程序员所使用后,其慢慢的被肩负了与IDE ...

  5. 我的Vim配置(自动补全/树形文件浏览)

    配置文件的下载路径在这里  http://files.cnblogs.com/files/oloroso/vim.configure.xz.gz 这实际上是一个 xz 格式的文件,添加的 gz 文件后 ...

  6. latextools \cite 自动补全

    最近在用latex写毕业论文,编辑环境用的是Sublime Text 2 加 latextools 插件,在使用latextools的\cite命令来引用参考文献时,我们希望输入\cite{ 后自动弹 ...

  7. WinForm AutoComplete 输入提示、自动补全

    一.前言 又临近春节,作为屌丝的我,又要为车票发愁了.记得去年出现了各种12306的插件,最近不忙,于是也着手自己写个抢票插件,当是熟悉一下WinForm吧.小软件还在开发中,待完善后,也写篇博客与大 ...

  8. phpmyadmin 主机名自动补全

    2015年2月9日 14:29:25 新安装的phpmyadmin在登录界面中, 主机名的输入框没有自动补全功能, 导致每次都得手动输入ip地址 找到 phpmyadmin/libraries/aut ...

  9. Vim 的补全模式加速器，轻松玩转全部 15 种自动补全模式

    1. 关于 Vim 补全模式    ---- Vim 一共提供了 15 种自动补全的模式(:help ins-completion).其中有两种的补全列表内容与另外两种相同,只是排序不同,这 15 种 ...

随机推荐

  1. Maven install没有将jar包加载到本地仓库

    错误描述 使用mvn install:install-file -Dfile=ojdbc8-19.3.0.0.jar -DgroupId=com.oracle -DartifactId=ojdbc8 ...

  2. 《你不知道的JS》上

  3. v82.01 鸿蒙内核源码分析 (协处理器篇) | CPU 的好帮手 | 百篇博客分析 OpenHarmony 源码

    本篇关键词:CP15 .MCR.MRC.ASID.MMU 硬件架构相关篇为: v65.01 鸿蒙内核源码分析(芯片模式) | 回顾芯片行业各位大佬 v66.03 鸿蒙内核源码分析(ARM架构) | A ...

  4. hibernate + hsqldb单元测试

    1.测试环境连接hsqldb,使用hibernate的自动建表功能. 1 <bean id="sessionFactory" 2 class="org.spring ...

  5. WPF 分组

    分组和树形结构是不一样的. 树形结构是以递归形式存在.分组是以键值对存在的形式,类似于GroupBy这样的形式. 举个例子 ID NAME SEX Class 1 张三 男 1 2 李四 女 2 3 ...

  6. 利用SignalR创建即时消息

    1. 什么是SignalR? SignalR 是一个及时消息推送,它与.NET 的 WCF ,WebAPI类似 是客户端和服务器进行消息交换的一种工具 2.SignalR 的作用? 它可以实时同步在线 ...

  7. [第18届 科大讯飞杯 J] 能到达吗

    能到达吗 题目链接:牛客5278 J 能到达吗 Description 给定一个 \(n\times m\) 的地图,地图的左上角为 \((1, 1)\) ,右下角为 \((n,m)\). 地图上有 ...

  8. 我的第一个开源作品Kiwis2 Mock Server

    我的第一个开源作品Kiwis2 Mock Server,目前公测中,欢迎大家提供宝贵意见. 代码:https://github.com/kiwis2/mockserver 主页:https://kiw ...

  9. SQL Server 2019企业版和标准版的区别？

    来源公众号:SQL数据库运维 原文链接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485400&idx=1&a ...

  10. UiPath鼠标操作元素的介绍和使用

    一.鼠标(mouse)操作的介绍 模拟用户使用鼠标操作的一种行为,例如单击,双击,悬浮.根据作用对象的不同我们可以分为对元素的操作.对文本的操作和对图像的操作 二.鼠标对元素的操作在UiPath中的使 ...