梅花雪的 Combo box 下拉输入框 Beta 版

Question

function comboxDivScrolling(){combox.candidateSelect= true;}
function String.prototype.Trim() {return this.replace(/(^\s*)|(\s*$)/g,"");}
function getObjectById(id)
{
  if (arguments.length == 0) return null;
  /*@cc_on @*/ /*@if (@_jscript_version>=3) return document.all(id); @end @*/
  try{return document.getElementById(id);}
  catch(e){return eval(id);}
}
function getObjectLeft(e)
{
   var l=e.offsetLeft; while(e=e.offsetParent) l += e.offsetLeft; return l;
}
function getObjectTop(e)
{
   var t=e.offsetTop;  while(e=e.offsetParent) t += e.offsetTop;  return t;
}
function setComboxClip()
{
  combox.width    = combox.object.clientWidth;
  combox.IS.width = combox.width-18;
  combox.DS.width = combox.width;
  combox.SS.clip  = "rect(0 "+ combox.width +" "+ combox.height +" "+ combox.IS.width +")";
  combox.SS.left  = combox.left + 1; //这个变态 select 的 clip 属性, 一定要 select 重载才发生作用
  setTimeout("combox.SS.left  = combox.left;");
}
function comboxSelectChange()
{
  combox.inputIndex   = combox.object.selectedIndex;
  combox.input.value  = combox.object.options[combox.object.selectedIndex].text;
  combox.inputValue   = combox.object.options[combox.object.selectedIndex].value;
  combox.input.select();
}
function comboxInputBlur()
{
  var a = combox.object.options, bb=true;
  for(var i=0; i<a.length; i++)
  {
    if(combox.input.value.Trim() == a[i].text){bb = false; break;}
  }
  if(combox.input.value.Trim() != "" && bb && !combox.candidateSelect)
  {
    combox.inputValue = combox.clientInput;
    combox.inputIndex = a.length;
    a.add(new Option(combox.clientInput, combox.clientInput));
    combox.object.options[combox.inputIndex].selected = true;
    setTimeout("setComboxClip()");
  }
  if(!combox.candidateSelect) comboxDivHidden();
}
function comboxDivMouseover(obj)
{
  var e = obj ? obj : window.event.srcElement;
  e.style.background = "highlight";
  e.style.color      = "highlighttext";
  combox.candidateSelect= true;
  for(var i=0; i<combox.div.children.length; i++)
  if(combox.div.children[i] == e) combox.divIndex = i;
  combox.candidateFocus = e;
  combox.inputIndex     = parseInt(e.id.substr(17));
  combox.candidateText  = combox.object.options[combox.inputIndex].text;
  combox.candidateValue = combox.object.options[combox.inputIndex].value;
}
function comboxDivMouseout(obj)
{
  var e = obj ? obj : window.event.srcElement;
  e.style.background = "#FFFFFF";
  e.style.color      = "#000000";
  combox.candidateSelect  = false;
  combox.candidateFocus   = null;
  combox.candidateValue   = "";
  combox.candidateText    = "";
}
function comboxDivClick()
{
  if(combox.candidateSelect)
  {
    combox.input.value = combox.candidateText;
    combox.inputValue  = combox.candidateValue;
    combox.object.options[combox.inputIndex].selected = true;
    combox.input.select();
    comboxDivHidden();
  }
}
function comboxDivHidden()
{
  for(var i=combox.div.children.length-1; i>=0; i--)
  combox.div.removeChild(combox.div.children[i]);
  combox.candidateSelect  = false;
  combox.candidateFocus   = null;
  combox.candidateValue   = "";
  combox.candidateText    = "";
  combox.divIndex         = -1;
  combox.DS.height        = 0;
  combox.DS.display       = "none";
}
function comboxInputKeyDown()
{
  switch(window.event.keyCode)
  {
    case 40 : comboxDivArrow(40); break;
    case 38 : comboxDivArrow(38); break;
    case 13 : comboxDivClick(combox.candidateFocus); break;
    default : setTimeout("combox.clientInput=combox.input.value; comboxDivChildren()"); break;
  }
}
function comboxDivChildren()
{
  var s = combox.input.value, d = null, a = combox.object.options;
  var divstyle = "font-size: 12px; padding: 2 1 0 2; color: #000000; cursor: default";
  var sameness = false;
  comboxDivHidden();
  if(s != "")
  {
    for(var i=0; i<a.length; i++)
    {
      if(a[i].text.Trim().indexOf(s) == 0)
      {
        if(a[i].text.Trim() == s) sameness = true;        d = document.createElement("div");
        d.style.cssText = divstyle;
        d.id            = "comboxDivChildren"+ i;
        d.innerText     = a[i].text;
        d.onclick       = comboxDivClick;
        d.onmouseover   = comboxDivMouseover;
        d.onmouseout    = comboxDivMouseout;
        combox.div.appendChild(d);
        d = null;
      }
    }
    if(combox.div.children.length > 0 && !(sameness && combox.div.children.length==1))
    combox.DS.display = "";
    if(combox.div.clientHeight > combox.candidateHeight) combox.DS.height = combox.candidateHeight;
  }
}
function comboxDivArrow(num)
{
  var a = combox.div.children;
  if(a.length == 0) return;
  if(combox.candidateFocus != null) comboxDivMouseout(combox.candidateFocus);
  if(num == 40) //住下翻选候选项
  {
    if(combox.divIndex < 0) combox.divIndex = 0;
    else if(combox.divIndex == (a.length-1))
    {
      combox.input.value = combox.clientInput;
      combox.divIndex = -1;
    }
    else combox.divIndex++;
  }
  else
  {
    if(combox.divIndex < 0) combox.divIndex = a.length-1;
    else if(combox.divIndex == 0)
    {
      combox.input.value = combox.clientInput;
      combox.divIndex = -1;
    }
    else combox.divIndex--;
  }
  if(combox.divIndex >= 0)
  {
    combox.candidateSelect  = true;
    combox.candidateFocus   = a[combox.divIndex];
    combox.inputIndex  = parseInt(combox.candidateFocus.id.substr(17));
    combox.input.value = combox.candidateText  = combox.object.options[combox.inputIndex].text;
    combox.inputValue  = combox.object.options[combox.inputIndex].value;
    combox.candidateFocus.style.background = "highlight";
    combox.candidateFocus.style.color      = "highlighttext";
  }
}
//--></SCRIPT>

Answer 1

http://fason.nease.net/temp/combox.htm只是完成基本的，有空在完善，:_)

Answer 2

我做这个 Combo Box 的环境是IE6.0, 所以在其它浏览器或者低版本的时候肯定会有 N 多问题, 我想再请大家帮一个忙, 就是在写出错误的时候也同时附上您使用的浏览器及版本号, 再次谢谢大家.

Answer 3

如果没有IE限制,可以使用一个Text筐加上一个 WinPopup 对象应该就可以模仿出来 :)

Answer 4

梅大哥,还有楼上的各位大哥能不能帮小弟看下这个问题,谢谢了!!http://expert.csdn.net/Expert/topic/2140/2140152.xml?temp=.7571222

Answer 5

示例:
http://pengxiang.vicp.net/test/MeizCombo.asp
(繁體碼)1.選擇后不能直接編輯,要選移動光標才行;
2.保存的一刷新就沒了:)
3.每修改一次就會新增一個item,舊有沒法刪
ie6.0繁體win2000 adv svr收藏!

Answer 6

good,虽然自己也能写出来，但是代码不极梅花雨兄的规范，强!!!

Answer 7

hehe,梅花的功力令人佩服！！！