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


Posted in Javascript onDecember 26, 2009

.老生常谈---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模仿msgbox提示效果代码
Jun 10 Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
javascript常用的设计模式
Feb 09 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
jQuery 常见开发使用技巧总结
Dec 26 #Javascript
javascript 最常用的10个自定义函数[推荐]
Dec 26 #Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 #Javascript
js tab效果的实现代码
Dec 26 #Javascript
javascript 计算两个整数的百分比值
Dec 26 #Javascript
用Javascript同时提交多个Web表单的方法
Dec 26 #Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 #Javascript
You might like
php使用异或实现的加密解密实例
2013/09/04 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
利用python爬取散文网的文章实例教程
2017/06/18 Python
Python之文字转图片方法
2018/05/10 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
python实现登录与注册系统
2020/11/30 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
四群教育工作实施方案
2014/03/26 职场文书
关于责任的演讲稿
2014/05/20 职场文书
库房管理员岗位职责
2015/02/12 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
SpringBoot 集成Redis 过程
2021/06/02 Redis