Java 输入框即时搜索显示

最新推荐文章于 2022-04-24 11:19:24 发布

北来无斋

最新推荐文章于 2022-04-24 11:19:24 发布

阅读量1.7k

点赞数 1

文章标签： java 即时搜索

本文链接：https://blog.csdn.net/qq_38337432/article/details/86610099

版权

最终结果展示

Html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript"   th:src="@{/js/jquery-3.3.1.min.js}"></script>
<style>
#myDiv {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -50px;
}
.mouseOver{
    background-color: #708090;
    color:#FFFAFA;
}

.mouseOut{
    background-color: #FFFAFA;
    color:#000000;
}
</style>
</head>
<body>
    <div id="myDiv">
        <input type="text" size="50" id="keyword" onkeyup="getMoreContents()"
               onfocus="getMoreContents()" onblur="clearContent()"/>
        <input type="button" id="search" value="搜索一下" width="50px" />
        <div id="popDiv">
            <table id="content_table" bgcolor="#FFFAFA" border="0"
                cellspacing="0" cellpadding="0">
                <tbody id="content_table_body">
<!--                     //动态数据在这里显示 -->
                </tbody>
            </table>
        </div>
    </div>
</body>

<script type="text/javascript">
    function getMoreContents() {
        var keyword = document.getElementById("keyword").value;
        if (keyword == "") {
            clearContent();
            return;
        } else {
            var ajax = new XMLHttpRequest();
            var url = "/user/getSearchMsg?input=" + keyword;
            ajax.open("GET", url, true);
            ajax.send(null);
            ajax.onreadystatechange = function() {
                if (ajax.readyState == 4) {
                    if (ajax.status == 200) {
                        var result = ajax.responseText;
                        insertContent(result);
                    }
                }
            }
        }
    }
    function insertContent(content) {
        clearContent();
        setLocation();
        //var json=content;
        var json = JSON.parse(content);
        var len = json.length;
        for (var i = 0; i < len; i++) {
            var value = json[i];
            var tr = document.createElement("tr");
            var td = document.createElement("td");
            td.setAttribute("bgcolor", "#FFFAFA");
            td.setAttribute("border", "0");
            var text = document.createTextNode(value);
            td.appendChild(text);
            tr.appendChild(td);   
            document.getElementById("content_table_body").appendChild(tr);
            td.onmouseover = function() {
                this.className = 'mouseOver';
                document.getElementById("keyword").value=this.innerHTML;
            };
            td.onmouseout = function() {
                this.className = 'mouseOut';
            };
        }

    }

    function clearContent() {
        var popNode = document.getElementById("popDiv");
        popNode.style.border = "none";
        var contentNode = document.getElementById("content_table_body");
        var len = contentNode.childNodes.length;
        for (var i = len - 1; i >= 0; i--) {
            contentNode.removeChild(contentNode.childNodes[i]);
        }
    }
    function setLocation(){
        var inputNode = document.getElementById("keyword");
        var width = inputNode.offsetWidth;
        var left = inputNode["offsetLeft"];
        var top = inputNode.offsetHeight+inputNode["offsetTop"];
        var popNode = document.getElementById("popDiv");
        popNode.style.border = "gray 0.5px solid";
        popNode.style.width = width+"px";
        popNode.style.top = top+"px";
        popNode.style.left = left+"px";
        document.getElementById("content_table").style.width=width+"px";
        
    }
</script>
</html>

下面是控制层接收前端的查询信息，返回一个数组给前端

@ResponseBody
	@RequestMapping(value = "/getSearchMsg")
	public String[] getSearchMsg(String input) {
		return userServiceImpl.getSearchMsgByInput(input);
	}```

第一篇CSDN 主要在于与人交流分享 有什么不对或者需要改进的地方请给我留言或者邮箱308935374@qq.com