Servlet+Ajax实现搜索框智能提示代码@慕课网原创_慕课网

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

#mydiv{
    position: absolute;
    left:50%;
    top:50%;
    margin-left: -200px;
    margin-top: -50ps;
}

.mouseOver{
    background: #708090;
    color:#FFFAFA;
}

.mouseOut{
    background: #FFFAFA;
    color:#000000;
}

</style>

    //首先获取用户的输入
    var content=document.getElementById("keyword");
    if(content.value==""){
        clearContent();
        return;         
    }
    //alert(content.value);
    //然后要给服务器发送用户输入的内容,因为采用的是ajax异步发送数据,所以要使用一个对象,XmlHttp对象
    //xmlHttp=获得xmlHttp对象;
    xmlHttp=createXMLHttp();
    //alert(xmlHttp);-- Object XMLHttpRequest对象
    //要给服务器发送数据   
    var url="search?keyword="+escape(content.value);
    //true(异步)表示js脚本会在send()方法之后继续执行,而不会等待来自服务器的响应--客户端发送数据给服务器
    xmlHttp.open("get", url, true);
    //xmlHttp绑定回调方法,这个回调方法会在xmlHttp状态改变的时候被调用,0-4状态,4状态表示交互完成
    //当完成之后,再调用回调方法才有意义     callback函数处理后台返回给前台的数据
    xmlHttp.onreadystatechange=callback;
    xmlHttp.send(null);
}

//获得XmlHttp对象
function createXMLHttp(){
    //对于大多数的浏览器都适用
    var xmlHttp;
    if(window.XMLHttpRequest){
        xmlHttp=new XMLHttpRequest();
    }
    //需要考虑浏览器的兼容性
    if(window.ActiveXObject){
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        if(!xmlHttp){
            xmlHttp==new ActiveXObject("Msxml2.XMLHTTP");
        }
    }
    return xmlHttp;

}

//回调函数
function callback(){
    //4代表完成
    if(xmlHttp.readyState==4){
        //200代表服务器响应成功,404代表路径错误资源未找到,500代表服务器内部错误
        if(xmlHttp.status==200){
            //交互成功,获得相应的数据,是文本格式
            var result=xmlHttp.responseText;
            //客户端获得json格式的数据--解析获得的数据  java的json和js的json有点小区别
            var json=eval("("+result+")");
            //获得数据之后,就可以动态的显示这些数据了,把这些数据显示到输入框的下面
            //alert(json);  //ajax,ajax post,james
            setContent(json);

        }
    }   
}

//设置关联数据的展示,参数代表的是服务器传递过来的关联数据,contents就是json传过来的解析过的result数据
function setContent(contents){

    clearContent();

    setLocation();
    //首先获得关联数据的长度,以此来确定生成多少tr
    var size=contents.length;
    //设置内容
    for(var i=0;i<size;i++){
        var nextNode=contents[i];//代表的是json数据的第i个元素
        var tr=document.createElement("tr");
        var td=document.createElement("td");
        td.setAttribute("border", "0");
        td.setAttribute("bgcolor", "#FFFAFA");

        //创建一个文本节点
        var text=document.createTextNode(nextNode);
        td.appendChild(text);
        tr.appendChild(td);
        document.getElementById("content_table_body").appendChild(tr);

        //鼠标移入绑定的"mouseOver"样式,鼠标移出绑定"mouseOut"样式
        td.onmouseover=function(){
            this.className='mouseOver';
        }
        td.onmouseout=function(){
            this.className='mouseOut';
        }
        td.onmousedown=function(){
            //这个方法实现当鼠标点击一个关联的数据时,关联数据自动设置为输入框的数据
            document.getElementById("keyword").value=this.innerHTML;
        }

    }
}

//清空之前的数据
function clearContent(){
    var contentTableBody=document.getElementById("content_table_body");
    var size=contentTableBody.childNodes.length;
    for(var i=size-1;i>=0;i--){
        contentTableBody.removeChild(contentTableBody.childNodes[i]);
    }
    //清除关联数据的外边框
    var popDiv=document.getElementById("popDiv").style.border="none";
}

//当输入框失去焦点的时候关联信息清空
function keywordBlur(){
    clearContent();
}

//设置显示关联信息的位置
function setLocation(){
    //关联信息显示的位置要和输入框长度一致
    var content=document.getElementById("keyword");
    var width=content.offsetWidth;//输入框的宽度
    var left=content["offsetLeft"];//到左边框的距离
    var top=content["offsetTop"]+content.offsetHeight;//到顶部的距离
    //获得显示数据的div
    var popDiv=document.getElementById("popDiv");
    popDiv.style.border="gray 1px solid";
    popDiv.style.left=left+"px";
    popDiv.style.top=top+"px";
    popDiv.style.width=width+"px";

    document.getElementById("content_table").style.width=width+"px";
}

</script>
</head>

                <!-- 动态查询出来的数据显示在这里 -->

            </tbody>
        </table>
    </div>
</div>

</body>
</html>