Home > Article > Web Front-end > Simple JS automatic prompt text box code_javascript skills

Simple JS automatic prompt text box code_javascript skills

WBOYOriginal: 2016-05-16 17:57:031414browse

This example uses color as an example to provide automatic prompts for users. The display effect and running results are as follows:

1. Establish the frame structure:

Copy the code The code is as follows:

2. Page and form CSS:

Copy code The code is as follows:

3. Implement JS matching user input:

Copy code The code is as follows:

文本框输入提示/自动完成的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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：In-depth understanding of JavaScript series (8) S.O.L.I.D Five Principles - Liskov Substitution Principle LSP_javascript skillsNext article：In-depth understanding of JavaScript series (8) S.O.L.I.D Five Principles - Liskov Substitution Principle LSP_javascript skills

See more

Simple JS automatic prompt text box code_javascript skills

Related articles