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

标签:公司介绍    日期:2019-01-31 10:34    录入:美娱国际平台注册    浏览:

  

[AutoComplete,自动完成]十分钟打造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+= "关闭";  
  
resultDiv.innerHTML=html;  
document.getElementById("searchResult").style.visibility="visible";  
}  
else  
{  
changeDisplay();  
}  
}  
}  
}  
  
这里我用的是json,当然也可以用XML或者字符串。

★★★小编:美娱国际 整理文章,欢迎大家转载 ★★★
上一篇:jQuery实现隔行变色的方法分析(对比原生JS)
下一篇:没有了
相关文章阅读
点击右上角的分享按钮即可收藏美娱国际平台注册 随时随地与好友一起分享精彩内容噢
最近更新
热门排行