十分钟打造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 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
动态为事件添加js代码示例
Feb 15 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
详解javascript的变量与标识符
Jan 04 Javascript
js图片切换具体实现代码
Oct 13 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
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
第九节 绑定 [9]
2006/10/09 PHP
php导出excel格式数据问题
2014/03/11 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
电钳专业个人求职信
2014/01/04 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
六查六看心得体会
2014/10/14 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
安全承诺书
2015/01/19 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
go 实现简易端口扫描的示例
2021/05/22 Golang
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android