实用文本框输入字符后下拉菜单内容自动匹配效果
来源:互联网 发布:刺客信条 mac 编辑:程序博客网 时间:2024/06/15 00:47
<!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><meta http-equiv="content-type" content="text/html;charset=gb2312"><title> 实用文本框输入字符后下拉菜单内容自动匹配效果</title><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;}#wwwzzjsnet{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><script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script><div id="wwwzzjsnet"><p>提示:可以输入内容可以提示</p><input id="auto_wwwzzjsnet" type="text" class="txt"><!--<input id="auto_zzjs_net" 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('auto_wwwzzjsnet')).bind(document.getElementById('auto_zzjs_net'));</script></body></html>
0 0
- 实用文本框输入字符后下拉菜单内容自动匹配效果
- Jquery 文本框输入内容,自动匹配select 下拉框内容
- NSComboBox输入字符时自动打开下拉菜单并匹配
- 像百度搜索框一样,在文本框中输入字符后,自动出现提示下拉框 [问题点数
- Excel多级下拉菜单联动自动匹配内容
- 选中下拉菜单的一项后,下面的两个文本框的内容随之改变
- js仿baidu google 实用的文本框内容自动完成效果
- 请教关于下拉菜单可输入文本自动匹配的问题
- 输入内容自动完成文本框(AutoCompleteTextView )
- 可以输入内容的下拉菜单
- 使用JQuery UI完成可输入内容且自动匹配的的下拉列表
- 反射效果,自己公司内部编码,在text上输入内容后,通过输入内容查询数据库,弹出下拉框
- 可输入、自动匹配的下拉框
- 可输入、自动匹配的下拉框
- 下拉框(可输入+自动匹配)
- 如何限制jsp页面的文本框中只能输入数字,输入其他字符后自动清空
- 慕课网--实现动态自动匹配输入内容
- android第八节自动匹配输入内容
- c#做对比软件
- 关于软件版本以及结构模式的小结【收集中】
- Visual Assist X 快捷键
- 网站打开速度的因素
- springmvc 处理lsit类型的请求参数映射成实体属性
- 实用文本框输入字符后下拉菜单内容自动匹配效果
- jquery 页眉单行信息滚动显示实现思路及代码
- 如何提高VS2010的性能,VS2010不再卡 (转)
- Android应用程序内发现新漏洞!
- 经纬财富:衡水影响现货白银价格走势因素分析
- 利用Axis2开发WebService(4)---用wsdl2java简化客户端的编写
- android的样式(style)与主题(theme)
- 死锁的四个必要条件及处理死锁
- 实现在同一方法中获取当前方法中新赋值的session值解决方法