天天看點
傳回

可輸入、自動比對的下拉框

最近做一B/S項目，客戶習慣了速達裡邊的COMBOBOX控件的使用，輸入産品編号然後自動提示比對産品資訊，為了實作這個功能想了很多辦法，原本在無技可施的時候準備用ActiveX控件湊合一下算了，好在JK兄出手相助，給偶一個類似的參考，終于了解了實作的方法，不過由于那套方案無法應對一些控件的遮擋，是以還不能完全達到要求，于是偶用POPUP方法改了下，終于大功告成，可以很好的實作客戶的要求了，現将源公開給大家一起讨論，由于偶JS功力不深，SO，該代碼還有很大的優化空間，歡迎大家讨論指正！

Thanks for JK!

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.;

  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='<DIV id="'+obj.id+'showcombox" style="position:relative;visibility:hidden">'

    +'<DIV class="ac_menu" 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+='<DIV class="ac_menuitem" οnmοuseοver="this.style.backgroundColor=/'#D6DEEC/';" οnmοuseοut="this.style.backgroundColor=/'/';" οnclick="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.οnfοcus=AC_OnFocus;

  obj.οnclick=AC_OnFocus;

  obj.οnblur=AC_OnBlur;

  obj.οnkeydοwn=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(var i=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(var i=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(var i=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" target="_blank" rel="external nofollow" >

<script language="javascript" src="../../main.js"></script>

</head>

<body>

<table cellpadding=4 cellspacing=0 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 産品三之七"];

var lav=["産品一之一","産品一之二","産品一之三","産品一之四","産品一之五","産品一之六","産品一之七",

"産品二之一","産品二之二","産品二之三","産品二之四","産品二之五","産品二之六","産品二之七",

"産品三之一","産品三之二","産品三之三","産品三之四","産品三之五","産品三之六","産品三之七"];

combobox(document.all.ccfield,lat,lat);

combobox(document.all.ttfield,lav,lat);

</script>

</body>

</html>

效果如下：

圖一：

可輸入、自動比對的下拉框

圖二：

可輸入、自動比對的下拉框

圖三：

可輸入、自動比對的下拉框

歡迎大家讨論，優化！

轉載請注明出處、作者；使用優化請務必郵件通知一下，好讓偶有機會向大家學習，謝謝！

技術文檔 産品 function null stylesheet border 優化
上一篇: 虛拟區域網路(VLAN)最佳實踐
下一篇: Gstreamer- 流狀态（Stream status）

繼續閱讀