地图 广告
招租

←—
订阅
投稿
您的位置:网站首页 > 特效代码 > 表格表单特效 > 正文:文本框输入提示/自动完成功能的JS特效

文本框输入提示/自动完成功能的JS特效

日期:2011-12-24 17:36:00 标签:表单特效 文本框 js特效 javascript 输入提示

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

由于代码运行框不够完善,本特效暂不提供运行预览,请见谅~~
。<!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>文本框输入提示/自动完成功能的JS特效丨芯晴网页特效丨CsrCode.Cn</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>

<br><br><hr>
<p align="center">本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。来源:源码爱好者</p>

本站已开启防盗链,请根据代码中对应的url地址下载保存特效所需的图片、flash和js文件,请见谅,谢谢.
(本文由 CsrCode.CN|芯晴网页特效 收集丨www.CsrCode.cn
本文网址:
评论信息
抱歉,本文暂停评论留言。