繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 十分钟打造AutoComplete自动完成效果代码
- Javascript
- js返回当前网页的url
- 简明json介绍
- JavaScript在IE中“意外地调用了方法或属性访问”
- JS获得鼠标位置（兼容多浏览器ie,firefox）修正版
- JavaScript 基础问答 四
- 支持多浏览器(IE、Firefox、Opera)剪切板复制函数
- js 解决“options为空或不是对象”
- 走出JavaScript初学困境—js初学
- JavaScript入门教程(6) Window窗口对象
- JavaScript 快捷键设置实现代码
- Extjs Ajax 乱码问题解决方案
- JavaScript 实现模态对话框 源代码大全
- [原创]js 日期加红代码 适用于各种cms
- 论坛里点击别人帖子下面的回复，回复标题变成“回复 24# 的帖子”
- [原创]javascript 改变字体大小方法集合
- javascript 单行文字向上跑马灯滚动显示
- 一个简单的javascript类定义例子
- javascript 类定义的4种方法
- javascript类继承机制的原理分析
- firefox(火狐)和ie浏览器禁止右键和禁止复制的代码
Javascript 中的 十分钟打造AutoComplete自动完成效果代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 291 ::
收藏到网摘: n/a
十分钟打造山寨版谷歌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+= "<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或者字符串。
评论 (0) All
