使用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(); };
第九
扫描二维码关注公众号,回复: 4889583 查看本文章第八
/** * 设置显示关联信息的位置 */ 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"; };