1. 云栖社区>
  2. >
  3. 正文

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

作者:用户 来源:互联网 时间:2016-12-26 16:30:55

autocomplete自动完成

十分钟打造AutoComplete自动完成效果代码_javascript技巧 - 摘要: 本文讲的是十分钟打造AutoComplete自动完成效果代码_javascript技巧, .老生常谈---XmlHttpRequest 代码 复制代码 代码如下: var xmlHttp; function createXmlHttpRequest() { if(window.ActieveXObject) { xmlHt

.老生常谈---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+= "<span onmousemove=\"changecolor(this)\" onclick=\"ChangeDivDisplay(this)\" onmouseout=\"changebackcolor(this)\" style=\"width: 195px; text-align: left; background-color: #FFFFFF; display: block; cursor: default;\">"+josnStr[key].bookName +"<span style=\" color: #008000; float: right;\">"+josnStr[key].bookCount+"本书</span></span>";

}
html+= "<span style=\" width: 195px; background-color: #FFFFFF; display: block;\"><a href=\"javascript:changeDisplay()\" style=\"float: right;\">关闭</a></span>";

resultDiv.innerHTML=html;
document.getElementById("searchResult").style.visibility="visible";
}
else
{
changeDisplay();
}
}
}
}

这里我用的是json,当然也可以用XML或者字符串。

以上是十分钟打造AutoComplete自动完成效果代码_javascript技巧的全部内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有十分钟打造AutoComplete自动完成效果代码_javascript技巧的相关内容,欢迎继续使用右上角搜索按钮进行搜索autocomplete 自动完成 快乐十分钟技巧、十分钟讲课的技巧、背书的技巧 十分钟内、十分钟讲课的技巧老师、十分钟模拟上课技巧,以便于您获取更多的相关知识。