1. 什么是搜索联想？自动补全？ 40
- 百度是一个很典型的代表。在百度的搜索框中输入相关信息的时候，会有搜索联想以及自动补全。
- 搜索联想和自动补全：实际上是为了方便用户的使用。让用户的体验更好。
- 搜索联想：当用户输入一些单词之后，自动联想出用户要搜索的信息，给一个提示。
- 自动补全：当联想出一些内容之后，用户点击某个联想的单词，然后将这个单词自动补全到搜索框当中。
- 搜索联想和自动补全功能，因为是页面局部刷新效果，所以需要使用ajax请求来完成。
1.1 搜索联想，自动补全功能的核心实现原理？ 40
- 当键盘事件发生之后，比如：keyup：键弹起事件。
- 发送ajax请求，请求中提交用户输入的搜索内容，例如：北京（发送ajax请求，携带“北京”两个字）
- 后端接收到ajax请求，接收到“北京”两个字，执行select语句进行模糊查询。返回查询结果。
- 将查询结果封装成json格式的字符串，将json格式的字符串响应到前端。
- 前端接收到json格式的字符串之后，解析这个json字符串，动态展示页面。
2. 代码 41-45
代码在com.bjpowernode.javaweb.servlet
QueryServlet
package com.bjpowernode.javaweb.servlet;
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.*;
//ajax实现搜索联想自动补全 44
@WebServlet("/query")
public class QueryServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获取用户输入的关键字
String keywords = request.getParameter("keywords");
// jdbc代码连接数据库，根据关键字查询数据库，返回数据，拼接json格式的字符串
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
//品川用的
StringBuilder sb = new StringBuilder();
sb.append("[");
try {
// 注册驱动
Class.forName("com.mysql.cj.jdbc.Driver");
// 获取连接
String url = "jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=UTF-8";
String user = "root";
String password = "lzl";
conn = DriverManager.getConnection(url, user, password);
// like 模糊查询的时候，条件不建议使用%开始，因为会让字段上的索引失效，查询效率降低。
String sql = "select content from t_ajax where content like ?";
ps = conn.prepareStatement(sql);
ps.setString(1,keywords+"%");
rs = ps.executeQuery();
// [{"content":"javascript"},{"content":"javaweb"},{"content":"java..."}]
while (rs.next()){
String content = rs.getString("content");
sb.append("{\"content\":\""+content+"\"},");
}
}catch (Exception e){
e.printStackTrace();
}finally {
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (ps != null) {
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
//直接响应
response.setContentType("text/html;charset=UTF-8");
//sb.substring(0,sb.length()-1)+"]"这是截取最后的逗号
response.getWriter().print(sb.substring(0,sb.length()-1)+"]");
}
}E:\java学习\Ajax\course\course12\web
autocomplete.html
<!--ajax实现搜索联想自动补全 41-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax实现搜索联想自动补全</title>
<!-- 这是一个类选择器 我们见文本框变大一点 41-->
<style>
.userInput{ /*给文本框设置一些格式*/
width: 300px;
height: 25px;
font-size: 20px;/*设置字体大小*/
padding-left: 5px;/*这个标签可以设置文本框中的字和左边框的距离*/
}
.showDataDiv{ /*给联想出来的选项的区域设置一些格式*/
width: 307px;
border: 1px solid lightgray; /*设置灰色边框*/
background-color: antiquewhite; /*设置背景色*/
display: none; /*隐藏div*/
}
.showDataDiv p{ /*给联想出来的选项设置一些格式*/
padding-left: 5px; /*设置字和左边框的距离*/
margin-top: 2px; /*设置字举例顶部的举例*/
margin-bottom: 2px; /*设置字举例低部的举例*/
}
.showDataDiv p:hover{ /*给联想出来的选项设置一些动作*/
cursor: pointer; /*设置当选中时变成小手*/
border: 1px blue solid; /*设置蓝色边框*/
background-color: aliceblue; /*设置背景色*/
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = ()=>{
document.getElementById("keywords").onkeyup = function (){
if (this.value==""){
document.getElementById("datadiv").style.display = "none"
}else{
//发送ajax请求 43
//创建ajax对象
const xmlHttpRequest = new XMLHttpRequest();
//注册回调函数
xmlHttpRequest.onreadystatechange=()=>{
if (xmlHttpRequest.readyState==4){
if (xmlHttpRequest.status>=200 && xmlHttpRequest.status<300){
//返回的json肯定是个数组
// [{"content":"javascript"},{"content":"javaweb"},{"content":"java..."}]
const json = JSON.parse(xmlHttpRequest.responseText);
//遍历数组
let html = ""
for (let i = 0;i<json.length;i++){
html +="<p onclick='setInput(\""+json[i].content+"\")'>"+json[i].content+"</p>"
}
document.getElementById("datadiv").innerHTML = html
//把div显示出来
document.getElementById("datadiv").style.display = "block"
}
}
}
//开启通道
xmlHttpRequest.open("GET","/ajax-autocomplete/query?_="+new Date().getTime()+"&keywords="+this.value,true)
//发送请求
xmlHttpRequest.send()
}
}
}
//自动补全 45
function setInput(content){
document.getElementById("keywords").value = content
document.getElementById("datadiv").style.display = "none"
}
</script>
<input type="text" class="userInput" id="keywords">
<div id="datadiv" class="showDataDiv">
<!--<p>北京疫情最新情况</p>
<p>北京天气</p>
<p>北京时间</p>
<p>北京人</p>-->
</div>
</body>
</html>
注意我们的数据库文件在E:\autocomplete.sql 42
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;