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

最新推荐文章于 2023-01-05 13:37:11 发布

jh035512

最新推荐文章于 2023-01-05 13:37:11 发布

阅读量219

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/jh035512/article/details/127838051

版权

遇到的小坑

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

代码实现

前端代码

100

101

102

103

104

105

<!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数据库，查询速度比较慢，但演示关键字联想和自动补全功能的测试目的已经达到

jh035512

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax实现关键字联想和自动补全功能及遇到坑

自己在远程数据库上用docker运行了一个mysql数据库，查询速度比较慢，但演示关键字联想和自动补全功能的测试目的已经达到。数据表描述: 除了id, 就一个字段 content varchar(255) not null。一张表: tb_search。
复制链接

扫一扫