用js实现输入提示(自动完成)
2011-02-28 09:26
691 查看
以前也写过一个jQuery的这种插件,但是很多地方根本不用jQuery,这个功能也有很多其它库支持,但是为了用这个功能而加载很多js插件,这样效率明显下降了很多,而且这个东西平时也很常用,所以一决心自己写了个相对比较独立的。
完成有以下功能:
输入字符会把以输入字符开头的提示出来。
支持上下方向键选择提示选项,支持循环
支持绑定一个数组提示,支持ajax传递输入框值请求数据。
支持多个选择的dom元素一块绑定数据实现输入提示。各dom元素也可以单独绑定自己的数据实现输入提示,互不影响。
支持中文。
首先是js的核心部分,其各部分都有较详细的说明,代码如下:
其中了一些全局的自定义函数,如addEvent和在例子中将要用到的getElementsByClassName函数如下:
最后是调用的部分,调用和每个参数的部分都有说明和注意事项,再说一个其中source和ajax参数是二选一,如果二者都写只有source是有用的,调用代码如下:
代码比较多,但是测试的比较完整,基本没有什么大毛病了,如果有什么毛病请大家指正,谢谢!
下面是个完整的例子,大家可以在线测试一下,欢迎指正:
<!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 class="autoComplete" style="z-index:18"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:17"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:16"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:15"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:14"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:13"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:12"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:11"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:10"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:9"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:8"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:7"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:6"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:5"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:4"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:3"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:2"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:1"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:0"> <input value="input" /> <ul><li></li></ul> </div>
<div style="clear:both;"></div>
</div>
<div style="border:3px red double;margin:15px;padding:5px;">
<h3 style="line-height:10px;">Tip:</h3>
<ul>
<li>输入0、1,2会得到提示。</li>
<li>用鼠标或上下键可以选择提示。</li>
<li>选择点击鼠标或点回车可以选择选项。</li>
<li>可以修改调用处,使各个输入框提示不同内容。</li>
</ul>
</div>
</body>
</html>
P.S.:转载请注明本文的原始链接。
// var runCode = function(code){
if (code!=''){
var newwin = window.open('','_blank','');
newwin.document.open('text/html','replace');
newwin.opener = null;
newwin.document.write(code);
newwin.document.close();
}
};
document.getElementById('runBtn').onclick = function(){
runCode(document.getElementById('runcode').value)
};
// ]]>
完成有以下功能:
输入字符会把以输入字符开头的提示出来。
支持上下方向键选择提示选项,支持循环
支持绑定一个数组提示,支持ajax传递输入框值请求数据。
支持多个选择的dom元素一块绑定数据实现输入提示。各dom元素也可以单独绑定自己的数据实现输入提示,互不影响。
支持中文。
首先是js的核心部分,其各部分都有较详细的说明,代码如下:
;(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和在例子中将要用到的getElementsByClassName函数如下:
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 */ }); }; } })();
最后是调用的部分,调用和每个参数的部分都有说明和注意事项,再说一个其中source和ajax参数是二选一,如果二者都写只有source是有用的,调用代码如下:
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相同,如为字符串"[111,222,333,444]"等形式。*/ elemCSS:{ focus:{'color':'#00ff00','background':'red'}, blur:{'color':'#ff0000','background':'transparent'} },/* 些对象中的key要js对象中的style属性支持 */ input:'input',/* 输入框使用input元素 */ popup:'ul'/* 提示框使用ul元素 */ }); });
代码比较多,但是测试的比较完整,基本没有什么大毛病了,如果有什么毛病请大家指正,谢谢!
下面是个完整的例子,大家可以在线测试一下,欢迎指正:
<!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 class="autoComplete" style="z-index:18"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:17"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:16"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:15"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:14"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:13"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:12"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:11"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:10"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:9"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:8"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:7"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:6"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:5"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:4"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:3"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:2"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:1"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete" style="z-index:0"> <input value="input" /> <ul><li></li></ul> </div>
<div style="clear:both;"></div>
</div>
<div style="border:3px red double;margin:15px;padding:5px;">
<h3 style="line-height:10px;">Tip:</h3>
<ul>
<li>输入0、1,2会得到提示。</li>
<li>用鼠标或上下键可以选择提示。</li>
<li>选择点击鼠标或点回车可以选择选项。</li>
<li>可以修改调用处,使各个输入框提示不同内容。</li>
</ul>
</div>
</body>
</html>
P.S.:转载请注明本文的原始链接。
// var runCode = function(code){
if (code!=''){
var newwin = window.open('','_blank','');
newwin.document.open('text/html','replace');
newwin.opener = null;
newwin.document.write(code);
newwin.document.close();
}
};
document.getElementById('runBtn').onclick = function(){
runCode(document.getElementById('runcode').value)
};
// ]]>
相关文章推荐
- 用js实现输入提示(自动完成)的实例代码
- JavaScript-----用js实现输入提示(自动完成)[转载]
- 用js实现输入提示(自动完成)的实例代码
- 用js实现输入提示(自动完成)
- php+jquery 实现输入自动完成提示的功能
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
- 搜索框根据输入自动提示--js实现
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
- jQuery+PHP+Mysql实现输入自动完成提示的功能
- jQuery+PHP+Mysql实现输入自动完成提示的功能
- jQuery+PHP+Mysql实现输入自动完成提示的功能
- 基于 jQuery+PHP+Mysql实现输入自动完成提示
- JS实现在文本框输入时自动弹出相关内容提示
- jQuery+PHP+Mysql实现输入自动完成提示的功能
- js实现input 的自动完成提示,Autocomplete---此文失效请使用jquery easy-ui更方便(后加)
- jQuery实现用户输入自动完成功能
- js 提示自动完成效果
- JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
- 自动完成autoComplete,自动补全插件,输入提示
- 实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件