可输入下拉列表的实现方法 (1)

    闲话：每次作到有默认又可以自定义的表单时，就开始头痛。又是输入框又是下拉框的，先不说用户在用时会不会晕，自己看了都头晕。一直在幻想有没一个象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.onclick=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