十分钟打造AutoComplete自动完成效果代码
作者:bea
.老生常谈---XmlHttpRequest 代码 代码如下: var xmlHttp; function createXmlHttpRequest() { if(window.ActieveXObject) { xmlHttp=new ActieveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); } }
.老生常谈---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或者字符串。
有用 | 无用
代码
代码如下:
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或者字符串。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- extJs 常用到的增,删,改,查操作代码
- firefox和IE系列的相关区别整理 以备后用
- javascript 显示当前系统时间代码
- javascript options属性集合操作代码
- javascript 动态调整图片尺寸实现代码
- jquery $(document).ready() 与window.onload的区别
- jQuery的强大选择器小结
- IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
- JavaScript 拾漏补遗
- js 实现无干扰阴影效果 简单好用(附文件下载)
- 向大师们学习Javascript(视频与PPT)
- javascript+css 网页每次加载不同样式的实现方法
- 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
- jQuery中的常用事件总结
- jQuery 动态酷效果实现总结
- javascript dom操作之cloneNode文本节点克隆使用技巧
- javascript 格式化时间日期函数代码
- javascript 清空form表单中某种元素的值
- JavaScript 入门基础知识 想学习js的朋友可以参考下