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

 首页 > 网页特效 > 表单按钮 > 文本框输入提示/自动完成的Js代码

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

 2018-07-09  695  收藏  0 赞一个  0 真差劲  0 去评论

<!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=utf-8">
<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>

<!-- 以下与演示代码无关,使用时请移除. --> 
	<style type="text/css">
	#azz_discription{ width:600px; height:auto; border:1px dashed #CCC; margin:0 auto; padding:10px;}
	#azz_discription p{ line-height:25px;}
	</style>
	<div style="height:20px;"></div>
	<div id="azz_discription">
	<p style="text-align:center;">来源：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a>　代码整理：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a></p>
	<p>&hearts;尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
	</div>

<!-- 以上与演示代码无关,使用时请移除. --> 


</body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

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

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行