AJAX实现搜索联想 自动补全

news2024/11/6 9:51:31

分析:

1.想实现联想搜索需要数据库的数据支撑,需要进行模糊查询,搜索出所有包含用户输入的关键字信息,并将这些信息都反馈到前端,简化用户输入,从而提高用户的体验。

2.为了提高用户的使用体验,整个页面不能全部刷新,需要局部刷新,为此需要使用Ajax来实现。

3.前期准备:

        1)相关的数据库表

        2)JDBC工具类

        3)属性资源配置文件

        4)引入fastjson-1.2.2.jar,目的是实现Java对象和JSON对象之间的相互转化。

        5)需要引入mysql-connector-java-5.1.23-bin.jar,目的是实现对数据库的操作。

        6)引入jquery-3.6.0.min.js ,目的是使用jQuery编写Ajax代码。

 JDBC工具类代码:

package com.yjg.ajax.util;

import java.sql.*;
import java.util.ResourceBundle;

public class DBUtil {
    //私有的构造方法
    private DBUtil(){}

    //类加载时绑定属性资源文件(静态变量和静态代码块的执行时间一样,都是在类加载的时候执行,这时就看代码的先后顺序了,谁在前谁先执行)
    private static ResourceBundle bundle = ResourceBundle.getBundle("resources/db");

    static {
        try {
            Class.forName(bundle.getString("driver"));
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    /**
     * 获取数据库连接对象   (以后在实际开发中只要调用该方法就会完成注册驱动和获取连接两步)
     * @return 新的连接对象
     * @throws SQLException 这里选择上抛异常,由使用者捕捉。
     */
    public static Connection getConnection() throws SQLException {
        String url = bundle.getString("url");
        String user = bundle.getString("user");
        String password = bundle.getString("password");
        Connection conn = DriverManager.getConnection(url,user,password);
        return conn;
    }

    /**
     * 释放资源
     * @param conn 连接对象
     * @param stmt 数据库操作对象 这里最好写Statement,而不写PreparedStatement,
     *             原因是今后可以使用多态,既可以传一个父类对象,也可以传入子类对象。
     * @param rs 查询结果集
     */
    public static void close(Connection conn, Statement stmt, ResultSet rs){
        if (rs != null) {
            try {
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (stmt != null) {
            try {
                stmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}


实体类代码:

package com.yjg.ajax.bean;

public class AutoString {
    private String name;

    public AutoString() {
    }

    public AutoString(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    @Override
    public String toString() {
        return "AutoString{" +
                "name='" + name + '\'' +
                '}';
    }
}
 

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX实现搜索联想 自动补全</title>
    <style>
        #text{
            width: 500px;   /*文本输入框的宽度*/
            height: 30px;   /*文本输入框的高度*/
            padding-left: 5px;  /*文本输入框中光标离左边框的距离*/
            font-size: 20px;    /*文本输入框中字体大小*/
            border: black 1px solid;
        }
        #myDiv{
            width: 507px;                   /*设定div的宽度*/
            border: 1px black solid;        /*设定div的边框1px 颜色是黑色 实线*/
            background: cornsilk;           /*设定div的底色*/
            display: none;
        }
        #myDiv p{
            padding-left: 5px;      /*设定p标签文字距离左边线的距离*/
            margin-top: 2px;        /*设定p标签距离顶部距离*/
            margin-bottom: 2px;     /*设定p标签间距*/
        }
        #myDiv p:hover{             /*设定鼠标在p标签上悬停时*/
            cursor: pointer;        /*鼠标:小手的形状*/
            background-color: gold; /*背景颜色:gold*/
        }
    </style>
    <script type="text/javascript" src="/ajax/js/jquery-3.6.0.min.js"></script>
    <!-- 使用jQuery代码完成
    <script type="text/javascript">
        $(function () {
            $("#text").keyup(function () {
                //当文本输入框中没有输入任何字符的时候
                if ($("#text").val() == ""){
                    //div标签隐藏起来
                    $("#myDiv").hide();
                //文本输入框中有字符输入的时候,实现搜索联想,发送Ajax请求
                }else {
                    $.ajax({
                        type : "GET",
                        url : "/ajax/request7",
                        data : "value=" + this.value,
                        async : true,
                        success : function (json) {
                            var jsonObjList = JSON.parse(json);
                            let html = "";
                            for (let i = 0; i < jsonObjList.length; i++) {
                                const jsonObj = jsonObjList[i];
                                const name = jsonObj.name;
                                //在<p>标签上添加鼠标点击事件,传入<p>标签的值作为参数
                                html += "<p οnclick='setInput(\""+ name +"\")'>"+ name +"</p>"
                            }
                            //
                            $("#myDiv").html(html);
                            //让隐藏的div显示出来
                            $("#myDiv").show();
                        }
                    })
                }

            })
        });
        //<p>标签鼠标点击事件调用的回调函数
        function setInput(word) {
            //将<p>标签的内容设置到文本输入框中
            $("#text").val(word);
            //将值键入之后,隐藏myDiv标签
            $("#myDiv").hide();
        }
    </script>
    -->
    <!-- 以下使用纯JS代码完成 -->
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("text").onkeyup = function () {
                // alert(this.value);
                //console.log(this.value);
                if (this.value == ""){
                    document.getElementById("myDiv").style.display = "none";
                }else {
                    //发送Ajax请求
                    //1.创建核心对象
                    const xhr = new XMLHttpRequest();
                    //2.注册回调函数
                    xhr.onreadystatechange = function () {
                        if (this.readyState == 4) {
                            if (this.status >= 200 && this.status < 300) {
                                //将服务器端返回的JSON格式的字符串转换成JSON对象
                                const jsonList = JSON.parse(this.responseText);
                                let html = "";
                                //遍历
                                for (let i = 0;i < jsonList.length;i ++){
                                    //从集合取出的元素就是一个个的JSON对象
                                    let jsonObj = jsonList[i];
                                    //获取JSON对象的name属性,并拼接到<p>标签之中
                                    html += "<p οnclick='setInput(\""+ jsonObj.name +"\")'>"+jsonObj.name+"</p>";
                                }
                                //将拼接好的字符串添加到div之中
                                document.getElementById("myDiv").innerHTML = html;
                                //将隐藏的信息展现出来
                                document.getElementById("myDiv").style.display = "block";
                            }
                        }
                    };
                    //3.打开通道
                    xhr.open("GET","/ajax/request7?value=" + this.value,true);
                    //4.发送请求
                    xhr.send();
                }
            }
        };
        //<p>标签鼠标点击事件调用的回调函数
        function setInput(word) {
            //将<p>标签的内容设置到文本输入框中
            document.getElementById("text").value = word;
            //将值键入之后,隐藏myDiv标签
            document.getElementById("myDiv").style.display = "none";
        }
    </script>

</head>
<body>
    <input type="text" id="text"/>
    <div id="myDiv">
<!--        <p>平板测力计</p>-->
<!--        <p>圆筒测力计</p>-->
<!--        <p>拉压测力计</p>-->
<!--        <p>演示测力计</p>-->
<!--        <p>电子测力计</p>-->
    </div>

</body>
</html>

服务端代码:

package com.yjg.ajax.servlet;

import com.alibaba.fastjson.JSON;
import com.yjg.ajax.bean.AutoString;
import com.yjg.ajax.util.DBUtil;

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.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/request7")
public class AjaxRequest7Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String value = request.getParameter("value");
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        List<AutoString> list = new ArrayList<>();
        try {
            conn = DBUtil.getConnection();
            String sql = "select name from autostring where name like ?";
            ps = conn.prepareStatement(sql);
            ps.setString(1,"%"+ value +"%");
            rs = ps.executeQuery();
            while (rs.next()) {
                String name = rs.getString("name");
                AutoString autoString = new AutoString(name);
                list.add(autoString);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtil.close(conn,ps,rs);
        }
        String jsonString = JSON.toJSONString(list);
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().print(jsonString);
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/527086.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python中的各种报错-一般错误

目录 ValueError: check_hostname requires server_hostname missing 1 required positional argument: self xxx is not a package libpng warning: iCCP: cHRM chunk does not match sRGB check_hostname requires server_hostname python 安装第三方库&#xff0c;超时…

MQTTC数据桥接上云

[小 迪 导 读]&#xff1a;在工业物联网蓬勃发展的背景下&#xff0c;私有化部署已经不能满足当前的发展趋势了&#xff0c;因此dgiot在原有基础上进行创新&#xff0c;将私有化部署的区域数控一体机上的数据通过mqtt桥接的方式上传到云服务器上&#xff0c;完成数据的实时同步…

Baumer工业相机堡盟工业相机软件CameraExplorer常见功能使用说明一

Baumer工业相机堡盟工业相机软件CameraExplorer常见功能使用说明一 Baumer工业相机Baumer工业相机图像采集功能Baumer工业相机图像基本参数设置 Baumer工业相机 Baumer工业相机堡盟相机是一种高性能、高质量的工业相机&#xff0c;可用于各种应用场景&#xff0c;如物体检测、…

【前端提效】-- Chrome浏览器开发者工具使用技巧

介绍一下 DevTools 的一些好用的技巧&#xff0c;它能够很好地帮助你提高生产力和解决问题的能力。 1、打开命令行 或者使用&#xff1a;快捷键 Ctrl Shift P (Mac&#xff1a; ⌘ Shift P ) 命令行可以做很多事情&#xff0c;包括但不限于截图、更换主题等 2、控制 DevT…

暑假线上兼职:300-500元/小时,安利一个大学生也能月入8K的线上兼职

在后台经常收到这样的留言&#xff1a; 快接近暑假了&#xff0c;有没有线上兼职推荐&#xff1f; 如何提升自己的眼界和能力&#xff0c;为之后的职场铺路&#xff1f; 不知道有多少朋友是想提升自己获取资源信息的速度&#xff0c;发展自己的爱好&#xff0c;或者增加第二收入…

用友U8增加查询条件

1、检查要增加的条件是否在该表单中&#xff1b; 2、在查询条件中增加查询条件的管理方案 3、参照ID就是要参照的表 4、数据源&#xff0c;在要增加的表单数据库中查询该字段名&#xff0c;进行增加即可。 select * from purbillvouch where cpbvcode 0000000312 --PurBillV…

调用legend资源,生成地图图例

作者&#xff1a;lly 文章目录 前言一、接口详情二、具体实现三、结果展示 前言 最近很多小伙伴资源关于iServer图例的问题&#xff0c; 接下来我们就来介绍下如何使用iServer legend资源&#xff0c;生成地图图例 一、接口详情 请求示例 {"layerLegends": [{&quo…

达索的天线设计和仿真软件Antenna Magus 2023版本下载与安装配置教程

目录 前言一、Antenna Magus安装二、使用配置总结 前言 Antenna Magus软件是一款用于天线设计和仿真的软件&#xff0c;提供了一个全面的设计工具集&#xff0c;帮助工程师优化天线设计&#xff0c;同时减少设计周期。 Antenna Magus的主要特点&#xff1a; ——高级天线库&…

如何用 ChatGPT 帮你自动分析数据?

误判 好几天之前&#xff0c;我就在 ChatGPT 选单里看到了 Code Interpreter。它正在灰度测试中 —— 先给一部分用户试用&#xff0c;如果反响不错并做了一定改进&#xff0c;就能推广给更多用户。 可惜当时我没能正确理解它的含义&#xff0c;犯了一个大错误 —— 望文生义。…

ChatGPT 上线联网和插件功能;投资者看好新版搜索引擎

&#x1f680; ChatGPT 上线联网和插件功能 OpenAI宣布将在这周推出联网和插件功能&#xff0c;位于Alpha和Beta通道的ChatGPT Plus用户都可使用70多个上线的插件。 更新意味着ChatGPT将利用最新的信息和资讯为使用者提供服务。 上线的ChatGPT插件种类涵盖了行程安排助理、代…

Android开发-Android常用组件-Date Time组件

4.11 Date & Time组件 1.TextClock(文本时钟) TextClock是在Android 4.2(API 17)后推出的用来替代DigitalClock的一个控件&#xff01; TextClock可以以字符串格式显示当前的日期和时间&#xff0c;因此推荐在Android 4.2以后使用TextClock。 这个控件推荐在24进制的and…

[内网]RDP远程桌面密码凭证获取

文章目录 RDP保存凭据通过注册表查看当前主机本地连接过的目标机器记录查看当前主机保存的RDP凭据查看本地用户是否存有RDP密码文件通过密码文件获取guidMasterKey的值根据guidMasterKey找到对应Masterkey解密获取明文以上总结&#xff1a; 在授权渗透过程中&#xff0c;如果获…

PCB当中的跳线有什么作用

在PCB设计中&#xff0c;跳线是一种常见的连接方式。跳线是为了连接电路中的距离较远或无法直接连接的电路元件而设置的&#xff0c;其作用是非常重要的。在本文中&#xff0c;我们将探讨PCB中跳线的作用和应用。 一、什么是跳线 跳线是一种特殊的电路连接方式&#xff0c;它是…

EXCEL 0开头的数据处理

方法一&#xff1a;从数据库中存为csv 再新建一个EXCEL 数据——从文本/CSV 方法二&#xff1a; 在数据库里面加A&#xff0c;在EXCEL里面将A替换成 上单引号 ‘

【002】C++的关键字介绍

C的关键字介绍 引言一、关键字一览表二、数据类型相关的关键字三、存储相关的关键字四、控制语句相关的关键字总结 引言 &#x1f4a1; 作者简介&#xff1a;专注于C/C高性能程序设计和开发&#xff0c;理论与代码实践结合&#xff0c;让世界没有难学的技术。包括C/C、Linux、M…

CentOS7搭建keepalived+DRBD+NFS高可用共享存储

一、服务器信息 IP地址 类型 主机名 操作系统 内存 磁盘 192.168.11.110 主服务器 node01 CentOS7.9 2G 系统盘20G 存储盘20G 192.168.11.111 备服务器 node02 CentOS7.9 2G 系统盘20G 存储盘20G 二、两台主机…

新王诞生!ACP世界大赛中国区总决赛超燃收官!

“夺最高的冠&#xff0c;摘最亮的星&#xff01;” 2023 Adobe Certified Professional 世界大赛中国区总决赛 冠军诞生&#xff01; 2023ACP世界大赛中国区总决赛于5月13日-5月14日在苏州西交利物浦大学举办&#xff0c;历时2天的精彩角逐&#xff0c;于今日圆满收官&…

socket各个结构体及其参数

1.sockaddr_in结构体 //老的结构体 struct sockaddr{unsigned short sa_family; //地址类型,AF_xxxchar sa_data[14]; //14字节的端口和地址 }struct sockaddr_in{short int sin_family; //地址类型unsigned short int sin_port; //端口号st…

如何在项目中自定义注解实现权限数据管理案例

如何在项目中自定义注解实现权限数据管理案例 一、准备工程基本功能1. 创建工程并添加依赖2. 配置数据库信息3. Mybatis-Plus 代码生成器生成基本项目结构4. 因为项目中引入了spring-security&#xff0c;所有接口被保护了&#xff0c;所以用户实体和service分别实现UserDetail…

一封普通的SOA检讨书

近来许多文章关于SOA是否应当被看作是一个失败。Gartner分析师们也参与了这场争论&#xff0c;写了一封虚拟的信&#xff0c;以项目经理、企业架构师或首席开发工程师的名义&#xff0c;致“CIO、CEO、CFO、CTO和所有股东”&#xff0c;表明为什么作者承认SOA完全是场失败&…