AJAX--实现搜索框的搜索联想和自动补全
实现原理
- 当键盘事件发生之后，例如：keyup、keydown
- 发送ajax请求，请求中提交用户输入的搜索内容
- 后端接收到ajax请求，接收到搜索的内容，进行模糊查询
- 将查询结果封装成json格式的字符串，响应到前端
- 前端接收到json格式字符串之后解析动态展示到页面上
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax实现搜索联想自动补全</title>
<style>
.showData{
width: 200px;
height: 300px;
border: 1px black solid;
}
.showData p{
padding-left: 5px;
}
</style>
</head>
<body>
<script>
window.onload = () => {
document.getElementById("keywords").onkeyup = function(){
if (this.value == "null") {
document.getElementById("showDataDiv").style.display = "block"
}
// 发送ajax请求
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
const json = JSON.parse(xhr.responseText)
// 遍历数组
let html = ""
for (let i = 0; i < json.length; i++) {
html += "<p onclick='setInput("+json[i].content+")'>"+json[i].content+"</p>"
}
document.getElementById("showDataDiv").innerHTML = html
document.getElementById("showDataDiv").style.display = "block"
}
}
}
xhr.open("GET","URL/query?keywords="+this.value,true)
xhr.send()
}
}
function setInput(content){
document.getElementById("keywords").value = content
document.getElementById("showDataDiv").style.display = "block"
}
</script>
<input type="text" name="" id="keywords">
<div class="showData" id="showDataDiv">
<p>3</p>
<p>1</p>
<p>2</p>
</div>
</body>
</html>
后端代码
// 后端代码
声明HttpServletRequest request和HttpServletResponse responseText
// 获取用户输入的关键字
String keyWords = request.getParameter("keywords");
连接数据库，根据输入的关键字查询
然后拼串，弄成一个json格式的字符串
然后响应到前端
