使用ajax+servlet实现搜索框智能提示

今天主要写的是使用ajax+servlet仿百度的搜索智能提示，不喜勿喷。

首先我们先简单新建一个web工程，并新建一个search.jsp文件

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/search.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/search.js"></script>
<title>异步搜索:模拟百度</title>
</head>
<body>
    <div id="mydiv" >
        <input type="text" size="50" id="keyword" onkeyup="getMoreInfo()" onblur="keywordBlur()" onfocus="getMoreInfo()"/>
        <input type="button" value="百度一下" width="50"/>
        <!-- 内容展示的区域 -->
        <div id="popInfo">
            <table id="info_table">
                <tbody id="info_table_body">

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

其中onkeyup 的作用是：按键被放开的时候所触发的事件
onblur ：对象失去焦点的时候触发的事件，（此处是输入框失去焦点的时候触发）
onfocus：对象得到焦点的时候触发的事件

第二我们开始写js了，命名为search.js
这里我们要提到，前台和后台之间的交互，是通过一个叫xmlHttpRequest来进行两者信息的传递的（此处比较源生）

什么是 XMLHttpRequest 对象？

XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想，因为您能够：
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据
它有5中状态 ：0(未初始化) 1(载入) 2(载入完成) 3(交互) 4(完成)
咱们只关心4这个状态

获取xmlHttpRequest 对象

var createXmlHttp = function(){
 var xmlHttp;
 if(window.XMLHttpRequest){
    xmlHttp = new XmlHttpRequest();
    }else if(window.ActiveXObject){
    xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
 if(!xmlHttp){
    xmlHttp = new ActiveXObject("Msxml2.XMLHttp");
}
}
}

第三，我们需要将我们在输入框输入的内容传递到后台，此处需要获取这个输入的内容，并使用xmlHttp将内容传递过去，

//此处定义一个全局变量
var xmlHttp;
var getInfo = function(){
    //首先获取输入框输入的内容
    var info = document.getElementById("keyword");
    if(content.value==""){
        return;
    }
    //创建xmlHttpRequest;
    xmlHttp = createXmlHttp();
    //创建url
    var URL = “/search?keyword=”+escape(content.value);
    //建立连接
    /**
    *第三个参数为true代表async,不用等待来自服务器的响应
    */
    xmlHttp.open(“GET”,URL，true);
    /**
     * xmlHttp绑定回调方法：
     * 会在xmlHttp的状态改变的时候被调用 0-4
     * callback 是回调函数名
     */
    xmlHttp.onreadystatechange = callback;
    xmlHttp.send(null);

}

第四：回调函数

var callback = function(){
   if(xmlHttp.readyState == 4){
           /**
           * 200表示成功
           * 404表示资源未找到
           *500表示服务器错误
           */
        if(xmlHttp.status == 200){
            //接收返回的数据，（格式为文本：json也是文本格式）
            var response = xmlHttp.responseText;
            //解析json
            var jsonParseResp=evel("(+response+)");
            //将解析好的json动态显示到前台页面
            setInfo(jsonParseResp);
      }
    }
   }

第五：动态的将后台返回的数据显示在前台页面

var setInfo = function (content){
    var size  = content.length;
    for(var i=0;i<size;i++){
        var nodeText = content[i];
        var tr  = document.createElement("tr");
        var td = document.createElement("td");
        td.setAttribute("border", "1");
    td.setAttribute("bgcolor", "FFFAFA");
    //鼠标滑过的时候的样式
    td.onmouseover = function(){
        this.className="mouseover";
        //鼠标滑过的时候，输入框中就显示哪个值
        if(td.innerHTML!=null)
            document.getElementById("keyword").value = this.innerHTML;
    };
    //鼠标出去的时候的样式
    td.onmouseout = function(){
        this.className = "mouseout";
    };
    /**
     * 此处绑定一个onclick方法，当点击到这个td的时候，
     * 输入框中就会显示这个数据
     */
    td.onmousedown = function(){
        document.getElementById("keyword").value = this.innerHTML;
    };

    //创建文本接点
    var text = document.createTextNode(nextNode);
    td.appendChild(text);
    tr.appendChild(td);
    document.getElementById("info_table_body").appendChild(tr);

    } 
}

第六：清空数据

//清空数据
var clearInfo = function(){
var infoTableBody = document.getElementById("info_table_body");
//子节点的长度
var size = infoTableBody.childNodes.length;
for(var i = size-1;i>=0;i--){
    infoTableBody.removeChild(infoTableBody.childNodes[i]);
}
document.getElementById("popInfo").style.border = "none";
};

第七：当输入框失去焦点的时候，列表内容不显示
```
var keywordBlur = function(){
    clearInfo();

};
```
第九

第八

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

使用ajax+servlet实现搜索框智能提示

使用ajax+servlet实现搜索框智能提示

end

猜你喜欢