页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容极品源码：自动完成仿163篇

极品源码：自动完成仿163篇

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
</HEAD> 
<BODY> 
<style type="text/css"> 
 .autofinish{font-family:arial;font-size:12px;background:#eeeeee;border:1px solid #000000;padding:2px;color:#0000cc;} 
 .autofinish_over{background:#C4E4FF;font-size:12px;margin:5px;color:#0000cc} 
 .autofinish td{font-size:12px;} 
</style> 
<input id="toInput" type="text" style="margin:0;padding:0;width:80%;height:20px!important;height:25px;" autocomplete="off" name="to" onKeyDown="return f_OnKeyDown(this,event)" onKeyUp="f_OnKeyUp(this,event)" onBlur="f_OnBlur();"  tabindex="1" onDblClick="alert(this.value)" value="" > 
<script language="JavaScript"> 
</script> 
<label> 
双击获取值 
</label> 
<script language="JavaScript">var g_ArrEmailList; 
var g_MainDiv=null; 
var g_Body=null; 
var g_FirstTd=null; 
var g_CurrentTd=null; 
var g_InputObject=null; 
var g_OldInnerTxt=""; 
var g_NewInnerTxt=""; 
var g_TdCssClassName="autofinish_over"; 
var g_TbCssClassName="autofinish"; 
var g_AddListContainer=null; 
var g_IgnoreIE=false; 
g_IgnoreIE=(navigator.userAgent.indexOf('MSIE 5')!=-1||navigator.userAgent.indexOf('Mac')!=-1); 
function f_OnKeyDown(obj,event){ 
 if(obj!=g_InputObject){ 
  if(g_MainDiv!=null){g_MainDiv.innerHTML="";g_MainDiv=null;}; 
  g_OldInnerTxt="";g_NewInnerTxt="";g_FirstTd=null;g_CurrentTd=null;g_InputObject=obj;}; 
  f_InitMain(); 
  var kc=event.keyCode; 
  switch(kc){ 
   case 13:f_EnterKey();f_SetDivDisplay(false);return false;break; 
  case 27:f_EscapeKey();f_SetDivDisplay(false);return false;break; 
  case 8:f_BackSpaceKey(obj,event);return;break; 
  case 38:f_UpKey();return;break; 
  case 40:f_DownKey();return;break;default:break;};return true;}; 
function f_OnKeyUp(obj,event){ 
 var kc=event.keyCode; 
 var sTemp="13,27,38,40,9,116,"; 
 kc=kc+""; 
 if(sTemp.indexOf(kc)>-1){return false;}; 
 f_InitDivData(obj,event); 
 if(g_NewInnerTxt==""&&kc!=32){f_SetDivDisplay(false);}else{f_SetDivDisplay(true);};}; 
  
function f_OnKeyPress(){return;}; 
function f_OnChange(){return;}; 
function f_OnBlur(){if(g_InputObject==null){return;}; 
var s=g_InputObject.value; 
var x=s.substr(s.length-1,1); 
if(x==","||x==";"){g_InputObject.value=s.substr(0,s.length-1);};return;}; 
function f_OnPasete(){return;}; 
function f_InitMain(){ 
 if(g_Body==null){g_Body=document.body;}; 
 if(g_MainDiv==null){g_MainDiv=f_CreateDiv();g_Body.appendChild(g_MainDiv);};}; 
  
function f_CreateDiv(){ 
 var div=document.createElement("div"); 
 div.id="divEmailAddressMain"; 
 div.style.position="absolute"; 
 div.style.display="";return div;}; 
  
function f_SetDivDisplay(bTrue){ 
 if(bTrue){g_AddListContainer.style.display="";}else{g_AddListContainer.style.display="none";};}; 
   
function f_GetX(e){var l=e.offsetLeft;while(e=e.offsetParent){l+=e.offsetLeft;};return l;};function f_GetY(e){var t=e.offsetTop;while(e=e.offsetParent){t+=e.offsetTop;};return t;};function f_CreateTable(){var oTable=document.createElement("table");oTable.border=0;oTable.cellSpacing=2;oTable.cellPadding=2;oTable.className=g_TbCssClassName;return oTable;};function f_CreateRow(table){var rowNode=table.insertRow(-1);return rowNode;};function f_CreateColumn(row,i){var colNode=row.insertCell(document.all?-1:0);colNode.id="tdACMA_"+i;colNode.zIndex=i;colNode.align="left";colNode.style.cursor=document.all?"hand":"pointer";colNode.onmouseover=f_TdOnmouseover;colNode.onclick=f_TdOnclick;if(i==0){colNode.className=g_TdCssClassName;g_FirstTd=colNode;g_CurrentTd=colNode;}else{colNode.className="";};return colNode;};function f_TdOnmouseover(e){var o;if(!e){var e=window.event;};if(e.target){o=e.target;};if(e.srcElement){o=e.srcElement;};while(o.tagName!="TD"){o=o.parentNode;};o.className="";if(g_CurrentTd!=null){g_CurrentTd.className="";};g_CurrentTd=o;g_CurrentTd.className=g_TdCssClassName;};function f_TdOnclick(){f_FillCurrentEmail();}; 
function f_FillCurrentEmail(){ 
 if(g_CurrentTd==null||g_InputObject==null){return;}; 
 if(g_ArrEmailList==null||g_ArrEmailList.length==0){return;}; 
 var i=parseInt(g_CurrentTd.zIndex); 
 var s=g_OldInnerTxt; 
 if(g_OldInnerTxt!=""){s+=",";}; 
 g_InputObject.focus(); 
 g_InputObject.value=s+"\""+g_ArrEmailList[i][0]+"\" "+"<"+g_ArrEmailList[i][1]+">,";f_SetDivDisplay(false);g_CurrentTd=null;}; 
  
function f_InitDivData(objInput,event){ 
 var oTb,oTr,oTd; 
 g_ArrEmailList=f_GetArrEmailList(event); 
 if(g_ArrEmailList!=null){ 
  g_MainDiv.innerHTML=""; 
  oTb=f_CreateTable(); 
  g_MainDiv.appendChild(oTb); 
  for(var i=0;i<g_ArrEmailList.length;i++) 
  {oTr=f_CreateRow(oTb); 
  oTd=f_CreateColumn(oTr,i); 
  var sStrongTextName=g_ArrEmailList[i][0]; 
  var sStrongTextAddr=g_ArrEmailList[i][1]; 
  if(g_ArrEmailList[i][0].substring(0,g_NewInnerTxt.length)==g_NewInnerTxt){ 
   sStrongTextName="<b>"+g_NewInnerTxt+"</b>"+g_ArrEmailList[i][0].substring(g_NewInnerTxt.length,g_ArrEmailList[i][0].length);}; 
  if(g_ArrEmailList[i][1].substring(0,g_NewInnerTxt.length)==g_NewInnerTxt){ 
   sStrongTextAddr="<b>"+g_NewInnerTxt+"</b>"+g_ArrEmailList[i][1].substring(g_NewInnerTxt.length,g_ArrEmailList[i][1].length);}; 
  oTd.innerHTML="""+sStrongTextName+"" <"+sStrongTextAddr+">";}; 
  var e=objInput; 
  if(!document.getElementById("dvAddListContainer")){ 
   var tDiv=document.createElement("div"); 
   tDiv.id="dvAddListContainer"; 
   with(tDiv.style){position="absolute";zIndex="99";display="none";width=height="0px";}; 
   if(document.all&&!g_IgnoreIE){tDiv.innerHTML='<iframe id="ifAddList" scrolling="no" marginwidth="0" marginheight="0" frameborder="1" height="100%" width="100%"></iframe>';}; 
   document.body.appendChild(tDiv);}; 
   g_AddListContainer=document.getElementById("dvAddListContainer"); 
   g_AddListContainer.style.left=(f_GetX(e)+1)+"px"; 
   g_AddListContainer.style.top=(f_GetY(e)+24)+"px"; 
   g_AddListContainer.style.display=""; 
   g_AddListContainer.appendChild(g_MainDiv); 
   g_MainDiv.style.left=0;g_MainDiv.style.top=0; 
   if(document.all&&!g_IgnoreIE){ 
    var ifr=document.getElementById("ifAddList"); 
   ifr.style.width=(oTb.offsetWidth+1)+"px"; 
   ifr.style.height=(oTb.offsetHeight+1)+"px";};};}; 
function f_GetArrEmailList(event){ 
 if(g_InputObject==null){return null;}; 
 var s=g_InputObject.value; 
 var k=s.length; 
 var iLastSign=0; 
 if(s.lastIndexOf(",")>s.lastIndexOf(";")){ 
  iLastSign=s.lastIndexOf(",");}else{iLastSign=s.lastIndexOf(";");}; 
  g_NewInnerTxt=s.substring(iLastSign+1,k); 
  if(event.keyCode==8){ 
   g_NewInnerTxt=s.substring(iLastSign+1,k-1);}; 
   g_NewInnerTxt=f_Trim(g_NewInnerTxt); 
   g_OldInnerTxt=s.substring(0,iLastSign); 
   g_OldInnerTxt=f_Trim(g_OldInnerTxt); 
   var arr=new Array(); 
   var re; 
   var j=0; 
   if(g_NewInnerTxt==""){ 
    if(event.keyCode==32)arr=gArrEmailAddress;} 
    else{ 
    try{re=new RegExp("^"+g_NewInnerTxt,"i"); 
    for(var i=0;i<gArrEmailAddress.length;i++){ 
    if(re.test(gArrEmailAddress[i][0])||re.test(gArrEmailAddress[i][1])){ 
     arr[j]=gArrEmailAddress[i];j++;}; 
    }; 
    } 
    catch(ex){};}; 
    return arr;}; 
function f_EnterKey(){f_FillCurrentEmail();}; 
function f_EscapeKey(){return;}; 
function f_BackSpaceKey(obj,event){f_InitDivData(obj,event);if(g_NewInnerTxt==""){f_SetDivDisplay(false);}else{f_SetDivDisplay(true);};};function f_UpKey(){if(g_CurrentTd==null){return;};var k=g_CurrentTd.zIndex-1;if(k==-1){k+=1;};var oTd=document.getElementById("tdACMA_"+k);g_CurrentTd.className="";g_CurrentTd=oTd;g_CurrentTd.className=g_TdCssClassName;f_SetDivDisplay(true);}; 
function f_DownKey(){ 
 if(g_CurrentTd==null){return;}; 
 var k=g_CurrentTd.zIndex+1; 
 if(k==g_ArrEmailList.length){k-=1;}; 
 var oTd=document.getElementById("tdACMA_"+k); 
 g_CurrentTd.className=""; 
 g_CurrentTd=oTd;g_CurrentTd.className=g_TdCssClassName; 
 f_SetDivDisplay(true);}; 
  
function f_Trim(str){str=str.replace(/(^\s*)|(\s*$)/g,"");return str;}; 
  
 
</script> 
  
</BODY> 
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：极品源码：自动完成仿163篇

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：建立良好体验度的Web注册系统ajax
下一篇文章：javascript同步Import,同步调用外部js的方法

·在百度中搜索关于“极品源码：自动完成仿163篇”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

极品源码：自动完成仿163篇

文章评论

同类文章

最近更新

热点排行

极品源码：自动完成 仿163篇

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

极品源码：自动完成仿163篇

同类文章

最近更新

热点排行