文本框输入提示/自动完成的Js代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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">
		<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+'</span>';
						}
													);
						+'</li>';
					}
					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>
	</head>
	<body>
		友情提示：文本框屏蔽了回车，因此回车键暂不可用。
		<form name="salefrm" method="post" action="?action=add">
			<input type="text" id="abc" value="J" size="40">
			<input type="text" id="we" value="河" size="60">
		</form>
		<script type="text/javascript">
			//建立实例，第一个参数是实例对象的名称，第二个是最多显示的数量
			var oo=new mSift('oo',20);
			//数据
			oo.Data=['JavaScript特效','JS效果','Js代码','Java特效','Javascript代码','JS脚本','Js是什么意思','Java','Java游戏'];
			//指定文本框对象建立特效
			oo.Create(document.getElementById('abc'));
			var oxo=new mSift('oxo',20);
			oxo.Data=['河北省','河南省','河源市','河套平原','河北承德'];
			oxo.Create(document.getElementById('we'));
		</script>
	</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

文本框输入提示/自动完成的Js代码

分类

综合代码

描述

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