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

更新时间：2009年12月26日 23:37:53 作者：

十分钟打造山寨版谷歌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或者字符串。

Javascript仿京东放大镜的效果
本文主要介绍了Javascript仿京东放大镜效果的实例。具有很好的参考价值，下面跟着小编一起来看下吧
2017-03-03
微信小程序实现即时通信聊天功能的实例代码
这篇文章主要介绍了微信小程序实现即时通信聊天功能的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-08-08
AutoJs实现刷宝短视频的思路详解
这篇文章主要介绍了AutoJs实现刷宝短视频的思路详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-05-05
一些常用弹出窗口/拖放/异步文件上传等实用代码
今天写一点工作中遇到的东西【弹出窗口】【拖放】【异步文件上传】，大家共同学习,共同进步
2013-01-01
谈谈PHP中相对路径的问题与绝对路径的使用
经常看到有人踩在了PHP路径的坑上面了，感觉有必要来说说PHP中相对路径的一些坑，以及PHP中绝对路径的使用，下面一起来看看。
2016-08-08
javascript实现类似超链接的效果
这篇文章主要介绍了使用javascript实现类似超链接的效果的特效，通过示例熟悉javascript事件，这里推荐给大家。
2014-12-12
JavaScript 错误捕获与处理的完整指南
在JavaScript中捕获错误通常有四种方式,try-catch 语句块,Promise 的 catch 方法,throw 语句以及window.onerror事件处理程序,并通过代码示例给大家讲解的非常详细,需要的朋友可以参考下
2024-02-02
利用JS如何获取form表单数据
这篇文章主要给大家介绍了关于利用JS如何获取form表单数据的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-12-12
JavaScript图像延迟加载库Echo.js
Echo 是一个独立的 JavaScript 懒加载图像的工具，快速、体积小（不足1k）和使用 HTML5 的 data- 属性，通过本文给大家介绍JavaScript图像延迟加载库Echo.js ，感兴趣的朋友一起学习吧
2016-04-04
js格式化时间的方法
这篇文章主要介绍了js格式化时间的方法，对javascript时间格式化的方法进行了总结，感兴趣的小伙伴们可以参考一下
2015-12-12