AJAX--实现搜索框的搜索联想和自动补全-526互联

实现原理

当键盘事件发生之后，例如：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格式的字符串
然后响应到前端