智能搜素框功能

最新推荐文章于 2021-08-06 05:37:13 发布

原创最新推荐文章于 2021-08-06 05:37:13 发布 · 394 阅读

0 ·

CC 4.0 BY-SA版权

javaweb功能专栏收录该内容

1 篇文章

订阅专栏

这篇博客探讨了如何利用jsp、servlet和ajax技术来构建智能搜索框功能，详细介绍了前端代码的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本功能运用了jsp+servlet+ajax

下面是前端代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度</title>
    <link rel="stylesheet" type="text/css" media="screen" href="search.css" />
    <style text/css>
        .container{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -200px;
        margin-top: -50px;
        }
        .mouseover{
            background: #708090;
            color: #FFFAFA;
        }
        .mouseout{
            background:#FFFAFA;
            color:#000000;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="keyword" size="50" onkeyup="getMoreContexts()" onblur="keywordblur()" 
            onfocus="getMoreContexts()"/>
        <button width="50px">百度一下</button>
    <div id="pop">
        <table id="content_table" bgcolor="#fffafa" border="0" cellspacing="0"cellpadding="0">
            <tbody id="content_tbody">

            </tbody>
        </table>
    </div>
    </div>
</body>
<script type="text/javascript">

    function getMoreContexts() {
        //1.获得输入框的信息
        var content=document.getElementById("keyword");
        if(content.value==""){
            clearNode();//在撤回input框中的内容时清空数据
            return;
        }
        var xmlHttp=getXMLhttp();
        var url="search?keyword="+escape(content.value);
        xmlHttp.open("GET",url,true);
        xmlHttp.onreadystatechange=callback;
        xmlHttp.send(null);
    }
    //获得xmlHttp对象
    function getXMLhttp(){
        var xmlHttp;
        if(window.XMLHttpRequet){
            xmlHttp=new XMLHttpRequest();


        }
        if(window.ActiveXObject){
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            if(!xmlHttp){
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }

        }
        return xmlHttp;
    }
    //回调函数
    function callback() {
        if(xmlHttp.readyState==4){
            if(xmlHttp.status==200){
                var result=xmlHttp.responseText;
                var json=eval("("+result+")");
            }
        }
        setcontent(json);
    }
    //设置table表
    function setcontent(contents) {
        clearNode();
        setLocation();
        var size=contents.length;
        for(var i=0;i<size;i++){
            var nextNode=contents[i];
            var tr=document.createElement("tr");
            var td=document.createElement("td");
            td.setAttribute("border","0");
            td.setAttribute("bgcolor","#fffafa");
            td.onmousemove=function(){
                this.className='mouseover';
                
            };
            td.onmouseout=function(){
                this.className='mouseout';
            };
            td.onclick=function(){

            };
            var text=document.createTextNode(nextNode);
            td.appendChild(text);
            tr.appendChild(td);
            var tdbody=document.getElementById("content_tbody");
            tdbody.appendChild(tr);
        }
    }
    //对table表中的数据进行清除
    function clearNode(){
        var tbody=document.getElementById("content_tbody");
        var size=tbody.childNodes.length;
        for(var i=size-1;i>=0;i--){
            tbody.removeChild(tbody.childNodes[i]);
        }
        document.getElementById("content_table").style.border="none";
    }
    //失去焦点后清空数据
    function keywordblur(){
        clearNode();
    }
    //设置table表格的样式
    function setLocation(){
        var inp=document.getElementById("keyword");
        var width=inp.offsetWidth;
        var left=inp["offsetLeft"];
        var top=inp["offsetTop"]+inp.offsetHeight;
        var dtable=document.getElementById("pop");
        pop.style.border="black 1px solid";
        pop.style.width=width+"px";
        pop.style.left=left+"px";
        pop.style.top=top+"px";
        document.getElementById("content_table").style.width=width+"px";
    }
</Script>
</html>