<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>autoComplete</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.autoComplete {margin:8px;position:relative;float:left;}
.autoComplete input {width:200px;height:25px;margin:0;padding:0;line-height:25px;}
.autoComplete ul {z-index:-12;padding:0px;margin:0px;border:1px #333 solid;width:200px;background:white;display:none;position:absolute;left:0;top:28px;*margin-left:9px;*margin-top:2px;margin-top:1px\0;}
.autoComplete li {list-style:none;}
.autoComplete li a {display:block;color:#000;text-decoration:none;padding:1px 0 1px 5px;_width:97%;}
.autoComplete li a:hover {color:#000;background:#ccc;border:none;}
</style>
<script type="text/javascript">
//<![CDATA[
var getElementsByClassName = function (searchClass, node, tag) {/* 兼容各浏览器的选择class的方法;(写法参考了博客园:http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1529640.html,想了解更多请看这个地址) */
node = node || document, tag = tag ? tag.toUpperCase() : "*";
if(document.getElementsByClassName){/* 支持getElementsByClassName的浏览器 */
var temp = node.getElementsByClassName(searchClass);
if(tag=="*"){
return temp;
} else {
var ret = new Array();
for(var i=0; i<temp.length; i++)
if(temp[i].nodeName==tag)
ret.push(temp[i]);
return ret;
}
}else{/* 不支持getElementsByClassName的浏览器 */
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
patterns = [], returnElements = [], current, match;
var i = classes.length;
while(--i >= 0)
patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
var j = elements.length;
while(--j >= 0){
current = elements[j], match = false;
for(var k=0, kl=patterns.length; k<kl; k++){
match = patterns[k].test(current.className);
if(!match) break;
}
if(match) returnElements.push(current);
}
return returnElements;
}
};
var addEvent=(function(){/* 用此函数添加事件防止事件覆盖 */
if(document.addEventListener){
return function(type, fn){ this.addEventListener(type, fn, false); };
}else if(document.attachEvent){
return function(type,fn){
this.attachEvent('on'+type, function () {
return fn.call(this, window.event);/* 兼容IE */
});
};
}
})();
;(function(window){
/* 插件开始 */
var autoComplete=function(o){
var handler=(function(){
var handler=function(e,o){ return new handler.prototype.init(e,o); };/* 为每个选择的dom都创建一个相对应的对象,这样选择多个dom时可以很方便地使用 */
handler.prototype={
e:null, o:null, timer:null, show:0, input:null, popup:null,
init:function(e,o){/* 设置初始对象 */
this.e=e, this.o=o,
this.input=this.e.getElementsByTagName(this.o.input)[0],
this.popup=this.e.getElementsByTagName(this.o.popup)[0],
this.initEvent();/* 初始化各种事件 */
},
match:function(quickExpr,value,source){/* 生成提示 */
var li = null;
for(var i in source){
if( value.length>0 && quickExpr.exec(source[i])!=null ){
li = document.createElement('li');
li.innerHTML = '<a href="javascript:;">'+source[i]+'</a>';
this.popup.appendChild(li);
}
}
if(this.popup.getElementsByTagName('a').length)
this.popup.style.display='block';
else
this.popup.style.display='none';
},
ajax:function(type,url,quickExpr,search){/* ajax请求远程数据 */
var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
xhr.open(type,url,true);/* 同异步在此修改 */
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var that=this;
xhr.onreadystatechange = function(){
if(xhr.readyState==4) {
if(xhr.status==200) {
var data = eval(xhr.responseText);
that.match(quickExpr,search,data);/* 相同于成功的回调函数 */
}else{
alert("请求页面异常!");/* 请求失败 */
}
}
};
xhr.send(null);
},
fetch:function(ajax,search,quickExpr){
var that=this;
this.ajax(ajax.type,ajax.url+search,quickExpr,search);
},
initEvent:function(){/* 各事件的集合 */
var that=this;
this.input.onfocus = function(){
if(this.inputValue) this.value = this.inputValue;
var value=this.value, quickExpr=RegExp('^'+value,'i'), self=this;
var els = that.popup.getElementsByTagName('a');
if(els.length>0) that.popup.style.display = 'block';
that.timer=setInterval(function(){
if(value!=self.value){/* 判断输入内容是否改变,兼容中文 */
value=self.value;
that.popup.innerHTML='';
if(value!=''){
quickExpr=RegExp('^'+value);
if(that.o.source) that.match(quickExpr,value,that.o.source);
else if(that.o.ajax) that.fetch(that.o.ajax,value,quickExpr);
}
}
},200);
};
this.input.onblur = function(){/* 输入框添加事件 */
if(this.value!=this.defaultValue) this.inputValue = this.value;
clearInterval(that.timer);
var current=-1;/* 记住当前有焦点的选项 */
var els = that.popup.getElementsByTagName('a');
var len = els.length-1;
var aClick = function(){
that.input.inputValue = this.firstChild.nodeValue;
that.popup.innerHTML='';
that.popup.style.display='none';
that.input.focus();
};
var aFocus = function(){
for(var i=len; i>=0; i--){
if(this.parentNode===that.popup.children[i]){
current = i;
break;
}
}
//that.input.value = this.firstChild.nodeValue;
for(var k in that.o.elemCSS.focus){
this.style[k] = that.o.elemCSS.focus[k];
}
};
var aBlur= function(){
for(var k in that.o.elemCSS.blur)
this.style[k] = that.o.elemCSS.blur[k];
};
var aKeydown = function(event){
event = event || window.event;/* 兼容IE */
if(current === len && event.keyCode===9){/* tab键时popup隐藏 */
that.popup.style.display = 'none';
}else if(event.keyCode==40){/* 处理上下方向键事件方便选择提示的选项 */
current++;
if(current<-1) current=len;
if(current>len){
current=-1;
that.input.focus();
}else{
that.popup.getElementsByTagName('a')[current].focus();
}
}else if(event.keyCode==38){
current--;
if(current==-1){
that.input.focus();
}else if(current<-1){
current = len;
that.popup.getElementsByTagName('a')[current].focus();
}else{
that.popup.getElementsByTagName('a')[current].focus();
}
}
};
for(var i=0; i<els.length; i++){/* 为每个选项添加事件 */
els[i].onclick = aClick;
els[i].onfocus = aFocus;
els[i].onblur = aBlur;
els[i].onkeydown = aKeydown;
}
};
this.input.onkeydown = function(event){
event = event || window.event;/* 兼容IE */
var els = that.popup.getElementsByTagName('a');
if(event.keyCode==40){
if(els[0]) els[0].focus();
}else if(event.keyCode==38){
if(els[els.length-1]) els[els.length-1].focus();
}else if(event.keyCode==9){
if(event.shiftKey==true) that.popup.style.display = 'none';
}
};
this.e.onmouseover = function(){ that.show=1; };
this.e.onmouseout = function(){ that.show=0; };
addEvent.call(document,'click',function(){
if(that.show==0){
that.popup.style.display='none';
}
});/* 处理提示框dom元素不支持onblur的情况 */
}
};
handler.prototype.init.prototype=handler.prototype;/* JQuery style,这样我们在处的时候就不用每个dom元素都用new来创建对象了 */
return handler;/* 把内部的处理函数传到外部 */
})();
if(this.length){/* 处理选择多个dom元素 */
for(var a=this.length-1; a>=0; a--){/* 调用方法为每个选择的dom生成一个处理对象,使它们不互相影响 */
handler(this[a],o);
}
}else{/* 处理选择一个dom元素 */
handler(this,o);
}
return this;
};
return window.autoComplete = autoComplete;/* 暴露方法给全局对象 */
/* 插件结束 */
})(window);
/* 调用 */
addEvent.call(null,'load',function(){
autoComplete.call( getElementsByClassName('autoComplete'), {/* 使用call或apply调用此方法 */
source:['0123','023',123,1234,212,214,'033333','0352342',1987,17563,20932],/* 提示时在此数组中搜索 */
//ajax:{ type:'post',url:'./php/fetch.php?search=' },/* 如果使用ajax则远程返回的数据格式要与source相同 */
elemCSS:{ focus:{'color':'black','background':'#ccc'}, blur:{'color':'black','background':'transparent'} },/* 些对象中的key要js对象中的style属性支持 */
input:'input',/* 输入框使用input元素 */
popup:'ul'/* 提示框使用ul元素 */
});
});
//]]>
</script>
</head>
<body><!-- 这所以使用这么多的z-index是因为ie6和ie7的问题 -->
<div>
<div class="autoComplete" style="z-index:19"> <input value="input" /> <ul><li></li></ul> </div>
</div>
</body>
</html>
- 浏览: 25158 次
- 性别:
文章分类
最新评论
自动补全
- 博客分类:
- 随身笔记
发表评论
文章已被作者锁定,不允许评论。
-
不错的网站
2016-07-11 09:52 426IDEA学习笔记:http://www.youmeek.co ... -
oracle误删表数据以后的还原方法
2015-10-09 17:53 537alter table A enable row moveme ... -
使用POI导出EXCEL
2015-09-17 10:37 460/** * 填充导出信息 * @param vo * ... -
使用fat jar打包java项目
2015-09-16 10:07 991安装方法: 1. Eclipse在线更新方法Help &g ... -
点击发送短信验证码页面的代码
2015-09-07 15:53 1572解压上文的baseCheck,把里面的JS放到页面上 然后 ... -
验证码
2015-09-07 15:42 2881.jaba文件 public class Valida ... -
判断该目录下是否存在某个文件
2015-08-12 10:42 360String dirPath = reques ... -
JAVA调用接口
2015-07-26 16:22 335public static String getDate(S ... -
JS验证只能输入整数或小数
2015-07-17 11:01 969输入框 onkeyup="value=value ... -
JAVA JSON格式转MAP
2015-05-29 10:47 1112public class JsonHelp{ public ... -
JAVA读取配置文件
2015-05-27 14:47 259很简单的一句,记录下来以防忘记。 ResourceBund ... -
hibernate的Restrictions用法
2015-05-26 17:24 405转:http://www.cnblogs.com/evon16 ... -
mysql表复制
2015-05-26 17:22 444insert into sys_operator(uid, ... -
eclipse安装hibernate tools插件
2015-05-25 10:32 399hibernate tools插件:http://downl ... -
JAVA判断客户端请求是手机端还是PC端
2015-05-21 11:00 374public class HttpRequestDevice ... -
org.apache.jasper.compiler.TldLocationsCache tldScanJar
2015-05-20 10:19 1315今天启动Eclipse控制台报错,错误信息如下: 2015 ... -
java.lang.OutOfMemoryError: PermGen space
2015-05-20 10:09 317异常:java.lang.OutOfMemoryError: ... -
urlwrite配置带中文的参数
2015-05-11 09:35 457<rule> <note> ... -
Structs2注解问题
2015-05-07 22:44 300@Scope("prototype")@ ... -
JAVA编译问题
2015-05-07 22:43 0@Scope("prototype")@ ...
相关推荐
sublime的微信小程序代码自动补全sublime的微信小程序代码自动补全sublime的微信小程序代码自动补全sublime的微信小程序代码自动补全sublime的微信小程序代码自动补全sublime的微信小程序代码自动补全sublime的微信...
1-secureCRT连接ENSP模拟器不能够TAB自动补全.pdf1-secureCRT连接ENSP模拟器不能够TAB自动补全.pdf1-secureCRT连接ENSP模拟器不能够TAB自动补全.pdf1-secureCRT连接ENSP模拟器不能够TAB自动补全.pdf1-secureCRT连接...
微信小程序sublime开发工具-自动补全代码片段微信小程序sublime开发工具-自动补全代码片段微信小程序sublime开发工具-自动补全代码片段微信小程序sublime开发工具-自动补全代码片段微信小程序sublime开发工具-自动...
UltraEdit实现自动补全 可以添加 Java PHP自动补全
该案例主要实现TextBox控件在输入时,自动给出若干提示信息,提供自动补全功能
eclipse中java、javascript、html代码自动补全
使用过Source Insight的人一定对它的自动补全功能印象深刻,在很多的集成开发环境中,也都支持自动补全。vim做为一个出色的编辑器,这样的功能当然少不了。至于如何实现程序自动补全,网上教程很多。这里,我将自己...
plsql中 sql 语句自动补全 如 只输入s 即可自动补全为 select * from 使用方法 下载该文件 并在plsql中 选择 tools-perferences-edit-autoreplaces 点击浏览 选择该文件
输入框,自动补全的输入框,android输入框自动补全输入框 输入框,自动补全的输入框,android输入框自动补全输入框 输入框,自动补全的输入框,android输入框自动补全输入框 输入框,自动补全的输入框,android...
改进版 jquery 仿百度谷歌自动补全输入(支持中文) 本资源原版本是在本论坛下载的,但只支持英文输入的自动补全,后经改进,现版本可支持中文和数字输入的自动补全,特来分享,感谢原版作者
最新的Delphi编程助手,可在Win7、XP系统下运行,只要下载,点击安装exe文件,重新启动...其重主要的功能就是在编写代码的时候,自动补全代码,非常好用。 可运行在Delphi5\Delphi6\Delphi7以及最新的Delphi2010上。
解决Eclipse自动补全卡死的问题内附说明
本项目是利用DWR框架实现Ajax无刷新,自动补全功能!
Asp.net 搜索自动补全 自动补全 1、数据库配置文件 在 bin 目录下 hibernate.cfg.xml 2、环境为 Vs2008 + Sqlserver2000 sp4 3、如有问题 联系 QQ:35763281
Eclipse C/C++ 自动补全的cdt补丁,补全.
java ajax实现自动补全功能,代码完整,经过调试运行不会出错,有需要的朋友下载
c#TextBox输入框自动提示、自动完成、自动补全功能
自动激活eclipse和html和js自动补全功能
将解压后的zip文件复制到eclipse安装目录下的plugins文件夹中,替换原有文件,即可解决Eclipse3.6中Android代码自动补全卡死的问题。建议替换文件前先对原文件进行备份。
STM32CubeIDE代码自动补全插件纯绿色无需安装,即开即用,输入完成后500毫秒自动提示代码。