在web上打造可輸入下拉列表

　閒話：每次作到有默認又可以自定義的表單時，就開始頭痛。又是輸入框又是下拉框的，先不說用戶在用時會不會暈，自己看了都頭暈。一直在幻想有沒一個象VB裏的下拉框一樣，又能輸入又能選擇的。以前從網上找了不少這方面的用js的組合，一堆js代碼是一定了，但是使用麻煩，效果不怎麼樣，而且還很消耗客戶端的資源。兩天前在google處看到一個很cool的能輸入下拉框組合。曾想拿過來用，但是Google的js程序員太牛氣了，光一個js類洋洋灑灑寫了一大篇。想從中抽出需要的代碼，那簡直是大海里撈針，一激之下，仿了一個，以下是運行原理和原碼。

　正文：
　　參與插件：
　　　　select(下拉框：默認display:none)×1，text(文本框)×1，主div(層)×1，輔div(層)×n
　　原理：
　　text.onfocus事件中從select中讀取option項以一個option一個div的方式將option項加載到div內，並將div定位到text的下面，並同步div和text的寬度，然後div顯示，激活select隱藏函數，將div覆蓋到的select的visibility屬性全設置爲hidden(因爲在IE中div是遮不住select的)，同時向text加載各種必要的事件，確保能及時的作出反應。
　　text.onclick加載與onfocus一樣的函數，可以確保用戶的重複使用。
　　text.onkeyup加載匹配功能，用戶在文本框內輸入資料時自動匹配相符合的option項。
　　text.onblur判斷操作真的結束後(m_intTextSelectIn=true)將div.display設置爲none使div隱藏，並激活select顯示函數，將一開始被隱藏的select顯示出來。

　　主div.onmouseout將m_intTextSelectIn設置爲false鎖定結束標識，並將焦點賦給text，避免鼠標未作選擇，但已經離開了文本框和主div。
　　主div.onmouseover將m_intTextSelectIn設置爲true釋放被鎖定的結束標識

　　輔div.onmouseover修改當前div的背景，表示鼠標正處於該div上方。
　　輔div.onclick將m_intTextSelectIn設置爲true釋放被鎖定的結束標識，並將outerText賦值給text.value。最後將焦點賦給text，然後再blur將焦點彈開(本操作在Firefox裏提示出錯，但不影響使用)，激活text.onblur事件。

　　以上即時這個下拉輸入框的工作基本原理。還有一些小細節，如主div超出限定長度後會出現下拉框，主div的命名之類的。還有特別註明一下代碼裏的getPosition、HideOverSels、Obj1OverObj2均出至51js版主寶玉大俠之手，特此鳴謝。^^
　　以下是作好的js代碼，給有需要的朋友：

/*---------------------------------textselect.js--------------------------------------------------*/

var m_strTextselectDiv="Textselectshow_Div"
var m_intTextSelectIn=false
var ie=(document.getElementById && document.all);

for(var IDx=0,IDy='';document.getElementById(m_strTextselectDiv)!=null;IDx++,IDy=IDx){
 m_strTextselectDiv=(document.getElementById(m_strTextselectDiv + IDy)==null)?m_strTextselectDiv + IDy:m_strTextselectDiv
}
document.write ('<div id="' + m_strTextselectDiv + '" style="position: absolute;cursor: default;border: 1px solid #B2B2B2;background-color: #fff;display: none;"></div>')
// 獲取對象的座標
function getPosition(Obj)
{
 try{
  for (var sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft,Obj=Obj.offsetParent);
  return {left:sumLeft,top:sumTop}
 }catch(e){}
}
//處理Div中的選項/* 某個選項，輸入框的ID號 */
function divOnmoveover(obj,objText)
{
 var MM_objText=document.getElementById(objText)

 var objChilddiv=obj.parentNode.getElementsByTagName("div")
 for(var x=0;x<objChilddiv.length;x++){objChilddiv[x].style.cssText=''}
 obj.style.cssText='background-color: #330066;color: #ffffff;'

 obj.οnclick=function(){
  m_intTextSelectIn=false
  if(ie)
  {MM_objText.value=obj.outerText}
  else
  {MM_objText.value=obj.textContent}
  MM_objText.focus()
  MM_objText.blur()
 }
}

function showSelect(obj,A_seleObj)
{
 var ie=(document.getElementById && document.all);
 var objDiv =document.getElementById(m_strTextselectDiv)
 var seleObj =document.getElementById(A_seleObj)
 
 //循環取名，避免取了個重複的ID號
 for(var IDx=0,IDy='';obj.id=='';IDx++,IDy=IDx){
  obj.id=(document.getElementById("textSelect" + IDy)==null)?"textSelect" + IDy:''
 }
 objDiv.style.left=getPosition(obj).left
 objDiv.style.top=getPosition(obj).top+obj.offsetHeight
 objDiv.style.width=obj.offsetWidth
 objDiv.style.height='';
 objDiv.style.overflowY='';
 objDiv.innerHTML=''
 //讀取select的項目放到Div裏。
 for(var x=0;x<seleObj.options.length;x++)
 {objDiv.innerHTML+="<div οnmοuseοver=/"divOnmoveover(this,'" + obj.id + "')/" style='width:100%;white-space: nowrap;cursor: default;'>"+seleObj.options[x].text+"</div>"}
 //調整Div高度，過度顯示滾動條
 if(x>8)
 {
  objDiv.style.height=100;
  objDiv.style.overflowY='auto';
 }
 objDiv.style.display=''
 if(ie){HideOverSels(objDiv.id)}
 objDiv.οnmοuseοver=function(){m_intTextSelectIn=true}
 objDiv.οnmοuseοut=function(){m_intTextSelectIn=false;obj.focus();}
 
 obj.οnclick=function(){showSelect(obj,A_seleObj);obj.onkeyup();}
 //自動匹配選項中符合條件的記錄
 obj.οnkeyup=function(){
  if(obj.value==''){return false}
  var objChilddiv=objDiv.getElementsByTagName("div")
  for(var x=0;x<objChilddiv.length;x++)
  {objChilddiv[x].style.cssText=''}
  for(var x=0;x<objChilddiv.length;x++)
  {
   var strChilddiv=(ie)?objChilddiv[x].outerText:obj.textContent
   if(strChilddiv.substr(0,obj.value.length)==obj.value)
   {
    objDiv.scrollTop=objChilddiv[x].offsetHeight*x
    objChilddiv[x].style.cssText='background-color: #330066;color: #ffffff;'
    return true
   }
  }
 }
 obj.οnblur=function(){if(!m_intTextSelectIn){objDiv.style.display='none'};if(ie){HideOverSels(objDiv.id)}}
}

// 隱藏被ID爲objID的對象（層）遮擋的所有select
function HideOverSels(objID)
{
  var sels = document.getElementsByTagName('select');
  for (var i = 0; i < sels.length; i++)
  if (Obj1OverObj2(document.getElementById(objID), sels[i]))
 sels[i].style.visibility = 'hidden';
    else
    sels[i].style.visibility = 'visible';
}

//判斷obj1是否遮擋了obj2
function Obj1OverObj2(obj1, obj2)
{
var pos1 = getPosition(obj1)
var pos2 = getPosition(obj2)
var result = true;
var obj1Left = pos1.left - window.document.body.scrollLeft;
var obj1Top = pos1.top - window.document.body.scrollTop;
var obj1Right = obj1Left + obj1.offsetWidth;
var obj1Bottom = obj1Top + obj1.offsetHeight;
var obj2Left = pos2.left - window.document.body.scrollLeft;
var obj2Top = pos2.top - window.document.body.scrollTop;
var obj2Right = obj2Left + obj2.offsetWidth;
var obj2Bottom = obj2Top + obj2.offsetHeight;

if (obj1Right <= obj2Left || obj1Bottom <= obj2Top ||
  obj1Left >= obj2Right || obj1Top >= obj2Bottom)
  result = false;
return result;
}

/*---------------------------------textselect.js--------------------------------------------------*/

以下是使用例子。太晚了，不想寫太多了，直接看例子。

<!---------------------------------textselect.htm-------------------------------------------------->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 下拉輸入框整理 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script language="javascript" type="text/javascript" src="textselect.js"></script>
<body style="font-size:12px">
<input type="text" name="" size="10" οnfοcus="javascript:showSelect(this,'select1')"><select name="select1" id="select1" style="display: none" disabled>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<input type="text" name="" id="a" οnfοcus="javascript:showSelect(this,'select2')"><select name="select2" id="select2" style="display: none" disabled>
<option value="a">a</option>
<option value="b">b</option>
</select><br/>
<select id="hidden">
<option value="i">i</option>
<option value="j">j</option>
</select>
</body>
</html>
<!---------------------------------textselect.htm-------------------------------------------------->

本程序在window 2000、IE6及Firefox1.01下測試通過。

閒話：由於寫時一腦子激動，有點忘形之意，所以代碼有點繁瑣，大家有能力的話最好是優化一下後再使用。當然直接使用也不會怎麼。另外歡迎各位有手機的朋友到我的“海魚手機加瓦站(http://wwww.fishjava.com)”來轉轉，有不少的免費的手機遊戲和圖片提供給各位，不但可以在線試玩遊戲，直接通過WAP下載遊戲和圖片，還能自己上傳一些好玩的遊戲或圖片上來大家一起來玩。

 

下面是本人蔘考部分資料，利用各種方式寫的代碼，比較精簡

<br>
<br>eeeeeeeeeeeeeeeeeeee
<!--方法1-----主要是剪切下拉框---------->
<table width="742" border="1" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="742" height="25" valign="top" class="style1">

 <select   name="select" style=" position:absolute; width:160px; height:60px; clip:rect(0 160 60 142); " οnchange="document.all('idText').value=(this.value);">  
              <option value="1234567">1234567</option>  
              <option value="bbbbbbbbbbbb">bbbbbbbbbbbb</option>  
              <option value="cccccccccccc">cccccccccccc</option>  
              <option value="dddddddddddd">dddddddddddd</option>   
          </select>
   <INPUT TYPE="text"  id="idText" value="我們克玩咧" style=" position:absolute;width=142" >
<br><br>

   <INPUT TYPE="button" value="取值" οnclick="alert(document.all.idText.value)">
</td>
  </tr>
</table>

<br>
<br>eeeeeeeeeeeeeeeeeeee
<!--方法2-----主要利用把下拉框放在一個只有下拉框的下拉箭頭那麼大的span中---------->

<table width="742" border="1" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="742" height="25" valign="top" class="style1"><font color="#FF0000">
      <input type="text"  name="question" style="width:150px;height:21px; position:absolute">

      <span style=" margin-left:150px;width:18px;border:1px solid red;">
  
      <select name="r00" style="margin-left:-150px;width:168px;" onChange="javascript:document.all.question.value=this.value;">
        <option value="您的寵物的名字">您的寵物的名字</option>
        <option value="您身份證的最後3位">您身份證的最後3位</option>
        <option value="您的啓蒙老師">您的啓蒙老師</option>
        <option value="您最喜歡的食物">您最喜歡的食物</option>
        <option value="您最喜歡的一首歌">您最喜歡的一首歌</option>
        <option value="您最喜歡的一首歌">您最喜歡的一首歌</option>
      </select>

      </span>
  
   ＊</font> 如果您的密碼丟失，根據此可重獲密碼</td>
  </tr>
  <tr>
    <td height="3"></td>
  </tr>
</table>

 

 

<%
aa=trim(request.Form("clientUser"))
response.Write aa
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title></title>
</head>
<body>
<form method="post" action="zw11.asp">
<select name="select" style="position:absolute; left: 197px; top: 80px; width: 120px; height: 22px; clip: rect(0 120 22 100)" οnchange="clientUser.value=select.options[select.selectedIndex].text;clientUser.select()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="text" name="clientUser" style="position:absolute; left: 198px; top: 81px; width: 100px; height: 18px" value="請選擇二批名稱" οnfοcus="this.select();">
<input type="submit" name="Submit" value="添  加">
</form>
</body>
</html>

 

 

 

<%
aa=trim(request.Form("s1"))
response.Write aa
%>
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
function catch_keydown(sel)
{
        switch(event.keyCode)
        {
                case 13:
                        //Enter;
                        sel.options[sel.length] = new Option("","",false,true);
                        event.returnValue = false;
                        break;
                case 27:
                        //Esc;
                        alert("text:" + sel.options[sel.selectedIndex].text + ", value:" + sel.options[sel.selectedIndex].value + ";");
                        event.returnValue = false;
                        break;
                case 46:
                        //Delete;
                        if(confirm("刪除當前選項!?"))
                        {
                                sel.options[sel.selectedIndex] = null;
                                if(sel.length>0)
                                {
                                        sel.options[0].selected = true;
                                }
                        }
                        event.returnValue = false;
                        break;
                case 8:
                        //Back Space;
                        var s = sel.options[sel.selectedIndex].text;
                        sel.options[sel.selectedIndex].text = s.substr(0,s.length-1);
                        event.returnValue = false;
                        break;
        }
       
}
function catch_press(sel)
{
        sel.options[sel.selectedIndex].text = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode);
        event.returnValue = false;
}
//-->
</script>
</head>
<body οnlοad="s1.focus();">
<h3>操作方法:</h3>
<p>
1.按Enter鍵開始添加輸入新的選項...<br>
2.按Del鍵刪除當前選項...<br>
3.按Esc鍵查看當前選項的text和value值...<br>
4.按BackSpace鍵刪除當前選項的前一個字符...<br>
</p>
<p>
<form method="post" action="zw00.asp">
<select name="s1" οnkeydοwn="catch_keydown(this);" οnkeypress="catch_press(this);" style="font-size:12px;">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" name="Submit" value="添  加">
</form>
</p>
</body>
</html>

 

 

 

 

<%
aa=trim(request.Form("MdcCombo1"))
response.Write aa
%>
<script>
function loaditem(){
     with(document.all.MdcCombo1){
          AddItem("aaaaaa")
          AddItem("bbbbbb")
          AddItem("cccccc")
          AddItem("dddddd")
          AddItem("eeeeee")
          AddItem("ffffff")
      }
}
</script>
<body onLoad="loaditem()">
<form method="post" action="zw55.asp">
<OBJECT classid=clsid:8BD21D30-EC42-11CE-9E0D-00AA006002F3 id=MdcCombo1 name=MdcCombo1 VIEWASTEXT>
<PARAM NAME="VariousPropertyBits" VALUE="746604571">
<PARAM NAME="BackColor" VALUE="2147483653">
<PARAM NAME="ForeColor" VALUE="2147483656">
<PARAM NAME="MaxLength" VALUE="0">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="ScrollBars" VALUE="0">
<PARAM NAME="DisplayStyle" VALUE="3">
<PARAM NAME="MousePointer" VALUE="0">
<PARAM NAME="Size" VALUE="2540;635">
<PARAM NAME="PasswordChar" VALUE="0">
<PARAM NAME="ListWidth" VALUE="0">
<PARAM NAME="BoundColumn" VALUE="1">
<PARAM NAME="TextColumn" VALUE="65535">
<PARAM NAME="ColumnCount" VALUE="1">
<PARAM NAME="ListRows" VALUE="8">
<PARAM NAME="cColumnInfo" VALUE="0">
<PARAM NAME="MatchEntry" VALUE="1">
<PARAM NAME="ListStyle" VALUE="0">
<PARAM NAME="ShowDropButtonWhen" VALUE="2">
<PARAM NAME="ShowListWhen" VALUE="1">
<PARAM NAME="DropButtonStyle" VALUE="1">
<PARAM NAME="MultiSelect" VALUE="0">
<PARAM NAME="Value" VALUE="">
<PARAM NAME="Caption" VALUE="">
<PARAM NAME="PicturePosition" VALUE="458753">
<PARAM NAME="BorderColor" VALUE="2147483654">
<PARAM NAME="SpecialEffect" VALUE="2">
<PARAM NAME="Accelerator" VALUE="0">
<PARAM NAME="GroupName" VALUE="">
<PARAM NAME="ParagraphAlign" VALUE="1">
</OBJECT><br><br>
<input type="submit" name="Submit" value="ww">
</form>
</body>