简单JS自动提示文本框代码_javascript技巧

本例以颜色为例，为用户提供自动提示，展示效果和运行结果如图：

1、建立框架结构：

复制代码 代码如下:

Color:

2、页面和表单CSS：

复制代码 代码如下:

3、实现JS匹配用户输入：

复制代码 代码如下:

文本框输入提示/自动完成的Js代码
文本框输入自动匹配或提示的功能，输入内容，自动匹配对应数据，可用上下键控制选项、按回车键选择，也可以直接用鼠标选择。代码：建立实例，第一个参数是实例对象的名称，第二个是最多显示的数量。

<title>文本框输入提示/自动完成功能</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <script type="text/javascript"> function mSift_SeekTp(oObj,nDire){if(oObj.getBoundingClientRect&&!document.all){var oDc=document.documentElement;switch(nDire){case 0:return oObj.getBoundingClientRect().top+oDc.scrollTop;case 1:return oObj.getBoundingClientRect().right+oDc.scrollLeft;case 2:return oObj.getBoundingClientRect().bottom+oDc.scrollTop;case 3:return oObj.getBoundingClientRect().left+oDc.scrollLeft;}}else{if(nDire==1||nDire==3){var nPosition=oObj.offsetLeft;}else{var nPosition=oObj.offsetTop;}if(arguments[arguments.length-1]!=0){if(nDire==1){nPosition+=oObj.offsetWidth;}else if(nDire==2){nPosition+=oObj.offsetHeight;}}if(oObj.offsetParent!=null){nPosition+=mSift_SeekTp(oObj.offsetParent,nDire,0);}return nPosition;}} function mSift(cVarName,nMax){this.oo=cVarName;this.Max=nMax;} mSift.prototype={ Varsion:'v2010.10.29 by AngusYoung | mrxcool.com', Target:Object, TgList:Object, Listeners:null, SelIndex:0, Data:[], ReData:[], Create:function(oObj){ var _this=this; var oUL=document.createElement('ul'); oUL.style.display='none'; oObj.parentNode.insertBefore(oUL,oObj); _this.TgList=oUL; oObj.onkeydown=oObj.onclick=function(e){_this.Listen(this,e);}; oObj.onblur=function(){setTimeout(function(){_this.Clear();},100);}; }, Complete:function(){}, Select:function(){ var _this=this; if(_this.ReData.length>0){ _this.Target.value=_this.ReData[_this.SelIndex].replace(/\*/g,'*').replace(/\|/g,'|'); _this.Clear(); } setTimeout(function(){_this.Target.focus();},10); _this.Complete(); }, Listen:function(oObj){ var _this=this; _this.Target=oObj; var e=arguments[arguments.length-1]; var ev=window.event||e; switch(ev.keyCode){ case 9://TAB return; case 13://ENTER _this.Target.blur(); _this.Select(); return; case 38://UP _this.SelIndex=_this.SelIndex>0?_this.SelIndex-1:_this.ReData.length-1; break; case 40://DOWN _this.SelIndex=_this.SelIndex<_this.ReData.length-1?_this.SelIndex+1:0; break; default: _this.SelIndex=0; } if(_this.Listeners){clearInterval(_this.Listeners);} _this.Listeners=setInterval(function(){ _this.Get(); },10); }, Get:function(){ var _this=this; if(_this.Target.value==''){_this.Clear();return;} if(_this.Listeners){clearInterval(_this.Listeners);}; _this.ReData=[]; var cResult=''; for(var i=0;i<_this.Data.length;i++){ if(_this.Data[i].toLowerCase().indexOf(_this.Target.value.toLowerCase())>=0){ _this.ReData.push(_this.Data[i]); if(_this.ReData.length==_this.Max){break;} } } var cRegPattern=_this.Target.value.replace(/\*/g,'*'); cRegPattern=cRegPattern.replace(/\|/g,'|'); cRegPattern=cRegPattern.replace(/\+/g,'\\+'); cRegPattern=cRegPattern.replace(/\./g,'\\.'); cRegPattern=cRegPattern.replace(/\?/g,'\\?'); cRegPattern=cRegPattern.replace(/\^/g,'\\^'); cRegPattern=cRegPattern.replace(/\$/g,'\\$'); cRegPattern=cRegPattern.replace(/\(/g,'\\('); cRegPattern=cRegPattern.replace(/\)/g,'\\)'); cRegPattern=cRegPattern.replace(/\[/g,'\\['); cRegPattern=cRegPattern.replace(/\]/g,'\\]'); cRegPattern=cRegPattern.replace(/\\/g,'\\\\'); var cRegEx=new RegExp(cRegPattern,'i'); for(var i=0;i<_this.ReData.length;i++){ if(_this.Target.value.indexOf('*')>=0){ _this.ReData[i]=_this.ReData[i].replace(/\*/g,'*'); } if(_this.Target.value.indexOf('|')>=0){ _this.ReData[i]=_this.ReData[i].replace(/\|/g,'|'); } cResult+='<li style="padding:0 5px;line-height:20px;cursor:default;" onmouseover="'+ _this.oo+'.ChangeOn(this);'+_this.oo+'.SelIndex='+i+';" onmousedown="'+_this.oo+'.Select();">' +_this.ReData[i].replace(cRegEx,function(s){return '<span style="background:#ff9;font-weight:bold;font-style:normal;color:#e60;">'+s+'';});+''; } if(cResult==''){_this.Clear();} else{ _this.TgList.innerHTML=cResult; _this.TgList.style.cssText='display:block;position:absolute;background:#fff;border:#090 solid 1px;margin:-1px 0 0;padding: 5px;list-style:none;font-size:12px;'; _this.TgList.style.top=mSift_SeekTp(_this.Target,2)+'px'; _this.TgList.style.left=mSift_SeekTp(_this.Target,3)+'px'; _this.TgList.style.width=_this.Target.offsetWidth-12+'px'; } var oLi=_this.TgList.getElementsByTagName('li'); if(oLi.length>0){ oLi[_this.SelIndex].style.cssText='background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;'; } }, ChangeOn:function(oObj){ var oLi=this.TgList.getElementsByTagName('li'); for(var i=0;i<oLi.length;i++) { oLi[i].style.cssText='padding:0 5px;line-height:20px;cursor:default;'; } oObj.style.cssText='background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;'; }, Clear:function(){ var _this=this; if(_this.TgList){ _this.TgList.style.display='none'; _this.ReData=[]; _this.SelIndex=0; } } } </script>