十分钟打造AutoComplete自动完成效果代码

.老生常谈---XmlHttpRequest 代码复制代码代码如下: var xmlHttp; function createXmlHttpRequest() { if(window.ActieveXObject) { xmlHttp=new ActieveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); } } 如果不用Jquery手写javascript，上面要改成XmlHttpRequest对象池，这就不写了。 .触发AutoComplete函数代码复制代码代码如下: function $E(argument) { return document.getElementById(argument); } function GetInfo(e) { var input=$E("Text1").value; if(input.length<=0) { changeDisplay(); } else { createXmlHttpRequest(); var keyword=e.value; xmlHttp.onreadystatechange=readyStateChangeHandle; var url="AutoComplete.ashx?keyword="+keyword+"&timeStamp="+new Date().getTime(); xmlHttp.open("GET",url,true); xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); xmlHttp.send(null); } } 这里服务器后台是在.NET平台下的xxx.ashx一般处理程序响应客户端得请求，当然也可以用webserviece或者aspx.cs或WCF来响应客户端得请求，但是需要注意的是webservice响应客户端必须遵循遵循soap协议（当然也可以通过修改配置文件让webservice响应get或post请求），xxx.ashx和aspx.cs响应客户端要遵循http协议。当然后台也可以PHP或JAVA等。 .鼠标move变色复制代码代码如下: function changecolor(event) { event.style.background="#00FFFF"; } function changebackcolor(event) { event.style.background="#FFFFFF" } .选区隐藏与出现代码复制代码代码如下: function ChangeDivDisplay(e) { document.getElementById("Text1").value=e.firstChild.data; var html=""; document.getElementById("searchResult").innerHTML=html; document.getElementById("searchResult").style.visibility="hidden"; } function changeDisplay() { var html=""; document.getElementById("searchResult").innerHTML=html; document.getElementById("searchResult").style.visibility="hidden"; } .回调函数代码复制代码代码如下: function readyStateChangeHandle() { if(xmlHttp.readyState==4) { if(xmlHttp.status==200) { if(xmlHttp.responseText!="]") { var resultDiv=$E("searchResult"); var josnStr=eval('('+xmlHttp.responseText+')'); var html=""; for (var key in josnStr) { html+= ""+josnStr[key].bookName +""+josnStr[key].bookCount+"本书"; } html+= "<a href="javascript:changeDisplay()" style="float: right;">关闭</a>"; resultDiv.innerHTML=html; document.getElementById("searchResult").style.visibility="visible"; } else { changeDisplay(); } } } } 这里我用的是json,当然也可以用XML或者字符串。

　　推荐阅读

　　JQuery 写的个性导航菜单

（一）：XHTML：复制代码代码如下:<div id="sidebar"> <ul> <li><a href="index.html" class="normalMenu">Home</a></li> <li><a href="services.html" class="normalMenu">Services</a></li> <li><a href="faq.>>>详细阅读

本文标题：十分钟打造AutoComplete自动完成效果代码

地址：http://www.17bianji.com/kaifa2/JS/27399.html

1/2 1