web组合框的实现方法

由于html控件中没有组合框，所以web  组合框需要用特殊方法构造，当然构造方法有很多了：

一、利用文本框与列表框叠加而成，这个需要用css的clip，用的较多，但是需要绝对定位，而且定位需要精确。

二、一个文本框 +  一个新的页面 ，这种方法用的也不少，也就是载入页面时只装载文本框，只有需要的时候才通过代开一个新页面的方式打开列表。

三、利用文本框与一个列表容器并排摆放，但是列表容器需定义为绝对定位，但是不给其 left 和 top 的 定义。这个容器即可以是<div><span><table>等容器，也可以是列表控件。

下面就利用第三种方法实现组合框，这个组合框利用的容器是<div><table></table></div>,而且支持动态过滤，也就是当你在文本框中输入用于过滤的文本后，就可以根据输入的文本，自动过滤列表，也缩小选取范围。

核心代码如下：

<script language="javascript">
/ 动态列表 start  
   //用于由一个文本框和一个div组成的用于根据别名动态选择列表
   var ifMouseOver=0;
    var PatA=/[^/x00-/xff]+/;     //一个正则表达式，当文本框中的文字符合这个正则时，就不进行过滤
   function dl_mouseOver(p1)
   {
      ifMouseOver=1;
   }
  
   function dl_mouseOut(p1)
   {
      ifMouseOver=0;
   }
  
  
   function dl_showDiv(p1)
   {
      var DivObj=document.getElementById(p1);
      if(DivObj)
      {
         if(DivObj.style.display=='none')
             DivObj.style.display='';
                else
                    DivObj.style.display='none';
      }    
   }
  
  
   function dl_hideDiv(p1)
   {
      var DivObj=document.getElementById(p1);
      if(DivObj)
      {
         if(DivObj.style.display=='' && ifMouseOver==0)
             DivObj.style.display='none';      }    
   }
  
  
   function dl_InsertData(p1,p2,p3)
   {
      var DivObj=document.getElementById(p2);
      var textObj=document.getElementById(p3);
      if(textObj) textObj.value=p1.innerText;
      if(DivObj) {DivObj.style.display='none';}
   }
 var s_value="";
   function dl_sFilter(p1,p3,p5,p7)
   {
      //var kCode=event.keyCode;
   //var ccds=document.selection.createRange();
      //ccds.pasteText='';
      var tmpP1=p1.value;
      if(PatA.test(tmpP1)) return false;
      //document.selection .clear ();
          if (tmpP1!=s_value)
           {
           s_value=tmpP1;
            if(document.getElementById(p3))
                document.getElementById(p3).style.display='';
            for(var n=0;n<p5.length;n++)
            {
               if(p5[n].indexOf(tmpP1)>=0)
               {
                   if(document.getElementById(p7 + n))
                        document.getElementById(p7 + n).style.display='';       
               }
               else
               {
                   if(document.getElementById(p7 + n))
                        document.getElementById(p7 + n).style.display='none'; 
              
               }
            }
          }
   }
   ///  动态列表  end 
   </script>
  
  
    <% sub create_Dy_select(p_arrayname,byref p_rs,p_alias_field,p_main_field,p_inputname,p_divid,p_tr_id) 
          'p_arrayname   生成的js数组名字
          'p_rs          数据库记录集  
          'p_alias_field 别名字段名，用于过滤，如果与p_main_field相同，就是我们常见的组合框过滤方法
          'p_main_field  主字段名
          'p_inputname   文本框名字
          'p_divid       div容器的ID
          'p_tr_id       表格行id前缀
       r_count=p_rs.RecordCount
       if r_count>0 then
        %>
                                <!--    动态列表代码   start    -->
        <script language="javascript">
             var <%=p_arrayname%>=new Array(<%=r_count%>)
             var mm=0;
        </script>
       <%end if%>
      <div id="<%=p_divid%>" οnmοuseοver="dl_mouseOver(this);" οnmοuseοut="dl_mouseOut();" style="border:1 solid #FF0000;cursor:default;width:150;height:200;overflow-y:auto;background-color:#e0e0e0;position:absolute;display:'none'">
         <table width=100%>
        
         <%
            if r_count>0 then
               dim i
               i=0
         do while not p_rs.EOF
            o_alias=p_rs(p_alias_field)
         %>
             <script language="javascript">
                <%=p_arrayname%>[mm]='<%=o_alias%>';
                mm++;
             </script>
                   <tr id="<%=p_tr_id%><%=i%>" οnmοuseοver="this.style.backgroundColor='<%=selectedOptionBgColor%>';this.style.color='<%=selectedOptionColor%>';" οnmοuseοut="this.style.backgroundColor='';this.style.color='';"><td width=100% οnclick="dl_InsertData(this,'<%=p_divid%>','<%=p_inputname%>');">
                 <%=p_rs(p_main_field)%>
             </td></tr>
        <%     i=i+1
                p_rs.MoveNext
         loop
            end if
       %>
         </table>
         </div>
                  <!--   动态列表代码   end   -->     
         <%end sub%>   

调用方法：

 <%             s_arrayname       ="js_array_1"
                    s_alias_field     ="cz_alias"
                    s_main_field      ="cz_name"
                    s_inputname       ="cz"
                    s_divid           ="selectList_1"
                    s_tr_id           ="tr_id_1"
                  %>   
                      <input  name="<%=s_inputname%>"  type="text" οnclick="dl_showDiv('<%=s_divid%>');" οnblur="dl_hideDiv('<%=s_divid%>')"  οnkeyup="dl_sFilter(this,'<%=s_divid%>',<%=s_arrayname%>,'<%=s_tr_id%>');"><br>
      <%
           Call create_Dy_select(s_arrayname,rs,s_alias_field,s_main_field,s_inputname,s_divid,s_tr_id)
         %>