十分钟打造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日期处理函数
Oct 16 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
JS异步错误捕获的一些事小结
Apr 26 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
vue实现标签云效果的示例
Nov 09 Javascript
关于vue-router-link选择样式设置
Apr 30 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
一个目录遍历函数
2006/10/09 PHP
PHP新手上路(五)
2006/10/09 PHP
用header 发送cookie的php代码
2007/03/16 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
Python中input和raw_input的一点区别
2014/10/21 Python
python读取几个G的csv文件方法
2019/01/07 Python
详解Python文件修改的两种方式
2019/08/22 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
工商管理实习生自我鉴定范文
2013/12/18 职场文书
出生公证书样本
2014/04/04 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android
python获取带有返回值的多线程
2022/05/02 Python
mysql sock 文件解析及作用讲解
2022/07/15 MySQL