JavaScript 文本框下拉提示(自动提示)

更新时间：2010年10月07日 00:09:51 作者：

JavaScript 文本框下拉提示，类似百度和Google的输入框提示效果，这里为了演示时加载的速度比较快，选用了一些数据，输入“1”可更好的看到效果。

<!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>文本框下拉提示效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> html{overflow:-moz-scrollbars-vertical;} body{padding:0;margin:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} body,h1,p,blockquote,dl,dt,dd,ul,ol,li,input{margin:0;padding:0;} button,input,select,textarea {font:12px/1.5 tahoma,arial,simsun,sans-serif;} button,input,select,textarea{font-size:100%;} a{text-decoration:none;} a:hover{text-decoration:underline;} #wrap{width:650px;margin:0 auto;} .txt{width:210px;height:25px;border:1px solid #ccc;line-height:25px;padding:0 5px;} .autoDis{border:1px solid #999;position:absolute;overflow:hidden;} .autoDis p{line-height:25px;cursor:default;padding:0 5px;} .autoDis li{line-height:25px;cursor:default;padding:0 5px;background-color:#fff;} .autoDis .cur{background:#ccc;} </style> </head> <body> <div id="wrap"> <p>提示：可以输入"1"开头的</p> <input id="autoCom" type="text" class="txt"> <input id="autoC" type="text" class="txt"> </div> <script type="text/javascript"> (autoComplete={ pop_len:10, pop_cn:'autoDis', hover_cn:'cur', source:'13612345564|13825646464|13412236054|13012348564|13012345564|13012365564|彭小|王达|李相公|周欢欢'.split('|'), init:function(){ this.setDom(); return this; }, bind:function(x){ if(x.getAttribute('type') != 'text' || x.nodeName != 'INPUT') return null; var self = this; x.onkeyup = function(e){ e = e || window.event; var lis = self.pop.getElementsByTagName('li'),lens = self.pop.getElementsByTagName('li').length,n=lens,temp; if(e.keyCode == 38){ //键盘up键被按下 if(self.pop.style.display != 'none'){ for(var i=0;i<lens;i++){ //遍历结果数据，判断是否被选中 if(lis[i].className) temp = i; else n--; } if(n==0){ //如果没有被选中的li元素，则选中最后一个 lis[lens-1].className = self.hover_cn; this.value = lis[lens-1].innerHTML; }else{ //如果有被选中的元素，则选择上一个元素并赋值给input if(lis[temp] == lis[0]){ //如果选中的元素是第一个孩子节点则跳到最后一个选中 lis[lens-1].className = self.hover_cn; this.value = lis[lens-1].innerHTML; lis[temp].className = ''; }else{ lis[temp-1].className = self.hover_cn; this.value = lis[temp-1].innerHTML; lis[temp].className = ''; } } }else //如果弹出层没有显示则执行插入操作，并显示弹出层 self.insert(this); }else if(e.keyCode == 40){ //down键被按下，原理同up键 if(self.pop.style.display != 'none'){ for(var i=0;i<lens;i++){ if(lis[i].className) temp = i; else n--; } if(n==0){ lis[0].className = self.hover_cn; this.value = lis[0].innerHTML; }else{ if(lis[temp] == lis[lens-1]){ lis[0].className = self.hover_cn; this.value = lis[0].innerHTML; lis[temp].className = ''; }else{ lis[temp+1].className = self.hover_cn; this.value = lis[temp+1].innerHTML; lis[temp].className = ''; } } }else self.insert(this); }else //如果按下的键既不是up又不是down那么直接去匹配数据并插入 self.insert(this); }; x.onblur = function(){ //这个延迟处理是因为如果失去焦点的时候是点击选中数据的时候会发现先无法触发点击事件 setTimeout(function(){self.pop.style.display='none';},300); }; return this; }, setDom:function(){ var self = this; var dom = document.createElement('div'),frame=document.createElement('iframe'),ul=document.createElement('ul'); document.body.appendChild(dom); with(frame){ //用来在ie6下遮住select元素 setAttribute('frameborder','0'); setAttribute('scrolling','no'); style.cssText='z-index:-1;position:absolute;left:0;top:0;' } with(dom){ //对弹出层li元素绑定onmouseover，onmouseover className = this.pop_cn; appendChild(frame); appendChild(ul); onmouseover = function(e){ //在li元素还没有加载的时候就绑定这个方法，通过判断target是否是li元素进行处理 e = e || window.event; var target = e.srcElement || e.target; if(target.tagName == 'LI'){ //添加样式前先把所有的li样式去掉，这里用的是一种偷懒的方式，没有单独写removeClass方法 for(var i=0,lis=self.pop.getElementsByTagName('li');i<lis.length;i++) lis[i].className = ''; target.className=self.hover_cn; //也没有写addClass方法，直接赋值了 } }; onmouseout = function(e){ e = e || window.event; var target = e.srcElement || e.target; if(target.tagName == 'LI') target.className=''; }; } this.pop = dom; }, insert:function(self){ var bak = [],s,li=[],left=0,top=0,val=self.value; for(var i=0,leng=this.source.length;i<leng;i++){ //判断input的数据是否与数据源里的数据一致 if(!!val&&val.length<=this.source[i].length&& this.source[i].substr(0,val.length) == val){ bak.push(this.source[i]); } } if(bak.length == 0){ //如果没有匹配的数据则隐藏弹出层 this.pop.style.display='none'; return false; }//这个弹出层定位方法之前也是用循环offsetParent，但发现ie跟ff下差别很大（可能是使用方式不当），所以改用这个getBoundingClientRect left=self.getBoundingClientRect().left+document.documentElement.scrollLeft; top=self.getBoundingClientRect().top+document.documentElement.scrollTop+self.offsetHeight; with(this.pop){ style.cssText = 'width:'+self.offsetWidth+'px;'+'position:absolute;left:'+left+'px;top:'+top+'px;display:none;'; getElementsByTagName('iframe')[0].setAttribute('width',self.offsetWidth); getElementsByTagName('iframe')[0].setAttribute('height',self.offsetHeight); onclick = function(e){ e = e || window.event; var target = e.srcElement || e.target; if(target.tagName == 'LI') self.value = target.innerHTML; this.style.display='none'; }; } s = bak.length>this.pop_len?this.pop_len:bak.length; for(var i=0;i<s;i++) li.push( '<li>' + bak[i] +'</li>'); this.pop.getElementsByTagName('ul')[0].innerHTML = li.join(''); this.pop.style.display='block'; } }).init().bind(document.getElementById('autoCom')).bind(document.getElementById('autoC')); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

form中限制文本字节数js代码
form中限制文本字节数js代码...
2007-06-06
JavaScript聚焦于第一个字段的代码
在web页面中，经常有信息录入页面，比如登录页面或者注册页面，在页面打开时，将光标的焦点自动定位在第一个输入字段中，这将会有更好的用户体验。
2010-10-10
表单JS弹出填写提示效果代码
表单JS弹出填写提示效果代码，需要的朋友可以参考下。
2011-04-04
JavaScript动态调整TextArea高度的代码
通过JavaScript根据TextArea的内容动态调整TextArea的高度，需要的朋友可以参考下。
2010-12-12
js禁用和激活input表单的方法
这个功能方便控制input表达的禁用和激活
2008-06-06
checkbox 多选框联动实现代码
对于checkbox 多选的联动效果，是个不错的思路，附代码
2008-10-10
js Form.elements[i]的使用实例
js Form.elements[i]的使用实例，这样的代码比document.form1的使用兼容性更好。
2011-11-11
js select多选列表传值代码
select多选列表传值，主要是读取选中的值，然后传递到对面的select中，每个功能都是独立的代码。
2009-12-12
当文本框的值发生改变时，触发事件，在IE中有效
当文本框的值发生改变时，触发事件，在IE中有效，具体的大家可以测试下。
2009-09-09
javascript类型File的Input按钮功能研究
在一些网站进行上传时，当单击了“浏览”按钮之后会弹出【选择文件】的对话框。很多时候我们需要只上传图像文件，那么在弹出的【选择文件】对话框中只显示了相关图片格式的文件，此外其余格式文件一律过滤不被显示。
2008-09-09

JavaScript 文本框下拉提示(自动提示)

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具