web組合框的實現方法

來源:互聯網
上載者:User
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]+/;   //一個Regex,當文字框中的文字元合這個正則時,就不進行過濾
  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%>" 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%>" ><td width=100% >
         <%=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" onblur="dl_hideDiv('<%=s_divid%>')" onkeyup="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)
     %>



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。