注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

jiwenxu的博客

CODE

 
 
 

日志

 
 

可输入、自动匹配的下拉框[转]  

2006-12-05 15:11:01|  分类: J2EE |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

STYLE.CSS

.ac_menu{border:1px solid#3162A6;background-color:#F6F6F6;z-index:99;cursor:default;overflow:hidden;-moz-box-sizing:border-box;height:expression((this.scrollHeight>130)?"130px":"auto")}
.ac_menuitem{width:100%;color:#141414;padding:2px;cursor:pointer;cursor:default;}
.ac_menuitem_selected{background-color:#D6DEEC;width:100%;color:#141414;padding:2px;cursor:default;}

MAIN.JS

<!--Combobox-->
function combobox(sobj,al_v,al_t)
{

 var rmopo = window.createPopup();

 function rm(i,oct,h)
  
  var i2=eval(i);
  var oct=eval(oct);
  var w=eval(i).offsetWidth;
  var h=eval(h);
  var lefter = i2.offsetLeft-1; var topper =i2.offsetHeight;
  rmopo.document.body.innerHTML =oct.innerHTML;
  rmopo.document.body.style.border="1px solid#3162A6";
 rmopo.document.body.style.background="#F6F6F6";
  rmopo.show(lefter, topper, w, h, i2);
 }

 loadcombobox(sobj,al_v,al_t);

 function loadcombobox(obj,al_v,al_t)
 {
  var obj = eval(obj)
  theListArrayV = al_v;
  theListArrayT = al_t;

  var tempStr='<DIVid="'+obj.id+'showcombox"style="position:relative;visibility:hidden">'
    +'<DIV id="'+obj.id+'ListDiv" style="FONT-SIZE: 12px;Z-INDEX: 10; POSITION: absolute;OVERFLOW-Y:auto;WIDTH:expression('+obj.offsetWidth+'-1);">'
  for(var i=0;i<theListArrayV.length;i++)
   tempStr+='<DIVonmouseover="this.style.backgroundColor=\'#D6DEEC\';"onmouseout="this.style.backgroundColor=\'\';"onclick="this.selectedflag=1;parent.document.all.'+obj.id+'.value=this.value;parent.document.all.'+obj.id+'.blur();"style="cursor:default;" value="'+htmlEncode(theListArrayV[i])+'"textvalue="'+htmlEncode(theListArrayT[i])+'">'+htmlEncode(theListArrayT[i])+'</DIV>';
  tempStr+='</DIV></DIV>';

 obj.insertAdjacentHTML("afterEnd",tempStr);
  obj.onfocus=AC_OnFocus;
  obj.onclick=AC_OnFocus;
  obj.onblur=AC_OnBlur;
  obj.onkeydown=AC_OnKeyDown;
  obj.autoComplete="off";
  obj.onpropertychange=AC_OnPropertyChange;
 }

 function AC_OnFocus(obj)
 {
  if(obj==null) obj=event.srcElement;
  popmenu=eval(obj.id+"showcombox");
  rm(obj,popmenu,130);
  AC_OnPropertyChange(obj);
 }


 function AC_OnBlur(obj)
 {
  rmopo.hide();
 }

 function AC_OnPropertyChange(obj)
 {
  if(obj==null) obj=event.srcElement;

  var dv =eval("rmopo.document.all['"+obj.id+"ListDiv']");
  theListDiv = dv
  if(theListDiv==null) return ;
  var theListDivChildren=theListDiv.children;

  theListDiv.selectedIndex=-1;
  var theFirstVisibleIndex=-1;

  var objValue=obj.value;

  for(vari=0;i<theListDivChildren.length;i++)
  {
  if(theListDiv.children[i].textvalue.indexOf(objValue)==0)
   {
   if(theFirstVisibleIndex==-1) theFirstVisibleIndex=i;
   theListDivChildren[i].style.backgroundColor="#F6F6F6";
   theListDivChildren[i].style.display="";
   }
   else
   theListDivChildren[i].style.display="none";
  if(theListDiv.selectedIndex==-1 &&theListDiv.children[i].textvalue==objValue)
   {
   theListDiv.selectedIndex=i;
   }
  }
  if(theListDiv.selectedIndex==-1 &&theFirstVisibleIndex!=-1)
  {
  theListDiv.selectedIndex=theFirstVisibleIndex;
  }
  if(theListDiv.selectedIndex!=-1)
  {
  theListDiv.children[theListDiv.selectedIndex].style.backgroundColor="#D6DEEC";
  }
  adjustListDivScroll(obj);
 }

 function AC_OnKeyDown(obj)
 {
  if(obj==null) obj=event.srcElement;

  var AC_TAB = 9;
  var AC_ENTER = 13;
  var AC_UP_ARROW = 38;
  var AC_DOWN_ARROW = 40;

  var dv =eval("rmopo.document.all['"+obj.id+"ListDiv']");
  theListDiv = dv
  if(theListDiv==null) return ;

  var keyCode=event.keyCode;
  if(keyCode==AC_ENTER)keyCode=event.keyCode=AC_TAB;

  if(keyCode==AC_TAB &&theListDiv.selectedIndex!=-1)
  {
  obj.value=theListDiv.children[theListDiv.selectedIndex].value;
   rmopo.hide() ;
  }
 
  if(keyCode==AC_UP_ARROW &&theListDiv.selectedIndex!=-1)
  {
   for(vari=theListDiv.selectedIndex-1;i>-1;i--)
   {
   if(theListDiv.children[i].style.display!="none")
    {
    theListDiv.children[theListDiv.selectedIndex].style.backgroundColor="#F6F6F6";
    theListDiv.selectedIndex=i;
    theListDiv.children[theListDiv.selectedIndex].style.backgroundColor="#D6DEEC";
    adjustListDivScroll(obj);
    break;
    }
   }
  }
 
  if(keyCode==AC_DOWN_ARROW &&theListDiv.selectedIndex!=-1)
  {
   for(vari=theListDiv.selectedIndex*1+1;i<theListDiv.children.length;i++)
   {
   if(theListDiv.children[i].style.display!="none")
    {
    theListDiv.children[theListDiv.selectedIndex].style.backgroundColor="#F6F6F6";
    theListDiv.selectedIndex=i;
    theListDiv.children[theListDiv.selectedIndex].style.backgroundColor="#D6DEEC";
    adjustListDivScroll(obj);
    break;
    }
   }
   return;
  }
 
 }

 function adjustListDivScroll(obj)
 {
  if(obj==null) obj=event.srcElement;

  var dv =eval("rmopo.document.all['"+obj.id+"ListDiv']");
  theListDiv = dv

  if ( theListDiv==null ||theListDiv.selectedIndex==-1 ) return ;
  var i=theListDiv.selectedIndex;
 if((theListDiv.children[i].offsetTop<theListDiv.scrollTop)||(theListDiv.children[i].offsetTop>theListDiv.scrollTop+120))
  theListDiv.scrollTop=theListDiv.children[i].offsetTop-85;
 }

 function htmlEncode(str)
 {
  if(str==null) return "";
  str=str.replace(/</ig,"&lt;")
  str=str.replace(/>/ig,"&gt;");
  str=str.replace(/"/ig,"&quot;");
  return str;
 }
}
<!--end-->


COMBOBOX.HTM

<html>
<head>
<link type="text/css" rel="stylesheet"href="../../style.css">
<script language="javascript"src="../../main.js"></script>
</head>
<body>

<table cellpadding=4 cellspacing=0 border=0 width="100%">
<tr>
<td >Pid A:</td>
<td style="padding-top:0px;" >
<input name="Cca" style="width:300" tabindex="1"id="ccfield">
</td>
</tr>
<tr>
<td >Pid B:</td>
<td style="padding-top:0px;" >
<input name="Ccb" style="width:300" tabindex="1"id="ttfield">
</td>
</tr>
<tr>
<td >Select:</td>
<td style="padding-top:0px;" >
<select style="width:300px;"></select>
</td>
</tr>
</table>

<script>
var lat=["001001 产品一之一","001002 产品一之二","001011产品一之三","001012 产品一之四","001021 产品一之五","001022产品一之六","001023 产品一之七",
"002031 产品二之一","002032 产品二之二","002041 产品二之三","002042产品二之四","002043 产品二之五","002051 产品二之六","002052产品二之七",
"003000 产品三之一","003001 产品三之二","003101 产品三之三","003102产品三之四","003201 产品三之五","003202 产品三之六","003216产品三之七"];
varlav=["产品一之一","产品一之二","产品一之三","产品一之四","产品一之五","产品一之六","产品一之七",
"产品二之一","产品二之二","产品二之三","产品二之四","产品二之五","产品二之六","产品二之七",
"产品三之一","产品三之二","产品三之三","产品三之四","产品三之五","产品三之六","产品三之七"];
combobox(document.all.ccfield,lat,lat);
combobox(document.all.ttfield,lav,lat);
</script>
</body>
</html>

  评论这张
 
阅读(48)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018