十分钟打造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 相关文章推荐
jQuery对象和DOM对象相互转化
Apr 24 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
AngularJS执行流程详解
Feb 17 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 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
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
Python通过字典映射函数实现switch
2020/11/06 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
MySQL面试题
2014/01/12 面试题
explicit和implicit的含义
2012/11/15 面试题
求职自荐书范文
2013/12/04 职场文书
小学教师事迹材料
2014/01/13 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
家长通知书家长评语
2014/04/17 职场文书
小学生思想品德评语
2014/12/31 职场文书
2015年资料员工作总结
2015/04/25 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫