思路
当键盘事件发生之后，比如：keyup：键弹起事件。 发送ajax请求，请求中提交用户输入的搜索内容，例如：北京（发送ajax请求，携带“北京”两个字） 后端接收到ajax请求，接收到“北京”两个字，执行select语句进行模糊查询。返回查询结果。 将查询结果封装成json格式的字符串，将json格式的字符串响应到前端。 前端接收到json格式的字符串之后，解析这个json字符串，动态展示页面。
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax实现搜索联想和自动补全功能</title>
</head>
<body>
当键盘事件发生之后，比如：keyup：键弹起事件。
发送ajax请求，请求中提交用户输入的搜索内容，例如：北京（发送ajax请求，携带“北京”两个字）
后端接收到ajax请求，接收到“北京”两个字，执行select语句进行模糊查询。返回查询结果。
将查询结果封装成json格式的字符串，将json格式的字符串响应到前端。
前端接收到json格式的字符串之后，解析这个json字符串，动态展示页面。
<style>
.userInput {
width: 300px;
height: 25px;
font-size: 20px;
padding-left: 5px;
}
.showDataDiv {
width: 310px;
border: 1px solid lightgray;
background-color: antiquewhite;
display: none;
/* 隐藏*/
}
.showDataDiv p {
padding-left: 5px;
margin-top: 2px;
margin-bottom: 2px;
}
.showDataDiv p:hover {
cursor: pointer;
border: 1px blue solid;
background-color: aliceblue;
}
</style>
<script type="text/javascript">
window.onload = function () {
document.getElementById("keywords").onkeyup = function () {
if (this.value == "") {
document.getElementById("datadiv").style.display = "none"
} else {
//键盘在输入框按下的时候来发送ajax请求
//创建对象
var xhr = new XMLHttpRequest();
//注册函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
//连接成功-->获取后端传送来的JSON字符串
//返回的是JSON数组
var html = ""
var jsonstrs = JSON.parse(this.responseText);
for (var i = 0; i < jsonstrs.length; i++) {
//取出
// html += "<p onclick='setInput("+json[i].content+")'>"+json[i].content+"</p>";
html += "<p onclick='setInput(\"" + jsonstrs[i].content + "\")'>" + jsonstrs[i].content + "</p>"
}
//放到div里
document.getElementById("datadiv").innerHTML = html;
// 显示出来
document.getElementById("datadiv").style.display = "block"
}
}
}
//开启通道
xhr.open("GET", "/a/ajax1" + "?t=" + new Date().getTime() + "&keywords=" + this.value, true);
//发送请求
xhr.send();
}
}
}
function setInput(data) {
document.getElementById("keywords").value = data
document.getElementById("datadiv").style.display = "none"
}
</script>
<input type="text" id="keywords" class="userInput">
<div id="datadiv" class="showDataDiv">
<!-- <p>北京疫情最新情况</p>-->
<!-- <p>北京天气</p>-->
<!-- <p>北京时间</p>-->
<!-- <p>北京人</p>-->
</div>
</body>
</html>后端代码
package com.wpc.javaweb;
import com.alibaba.fastjson.JSON;
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.*;
import java.util.ArrayList;
import java.util.List;
/**
* @author 一介草莽子
* version 1.0
*/
@SuppressWarnings({"all"})
@WebServlet("/ajax1")
public class QueryAjax 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<Content> list= new ArrayList<>();
try {
Class.forName("com.mysql.cj.jdbc.Driver");
//获得链接
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/db02", "root", "4653long");
String sql = "select * from t_ajax where content like ?";
ps = conn.prepareStatement(sql);
ps.setString(1, keywords+"%");
rs = ps.executeQuery();
while (rs.next()) {
String content = rs.getString("content");
int id = rs.getInt("id");
list.add(new Content(id,content));
}
//转换为JSON字符串
String jsonString = JSON.toJSONString(list);
response.getWriter().print(jsonString);
} catch (Exception e) {
e.printStackTrace();
} finally {
if (rs != null) {
try {
rs.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
if (ps != null) {
try {
ps.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
}
}
}
package com.wpc.javaweb;
/**
* @author 一介草莽子
* version 1.0
*/
@SuppressWarnings({"all"})
public class Content {
private int id;
private String content;
public Content(int id, String content) {
this.id = id;
this.content = content;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
数据库代码:
drop table if exists t_ajax;
create table t_ajax(
id int primary key auto_increment,
content varchar(255)
);
insert into t_ajax(content) values('javascript');
insert into t_ajax(content) values('javaweb');
insert into t_ajax(content) values('java');
insert into t_ajax(content) values('java123');
insert into t_ajax(content) values('mysql');
insert into t_ajax(content) values('myweb');
insert into t_ajax(content) values('myapp');
insert into t_ajax(content) values('jdk');
commit;
select * from t_ajax;