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

鉴于近日多有人问及可输入的下拉框, 我试写了一个 Combo Box , 现发到论坛里大家帮忙测试一下, 有什么问题大家尽管提出来, 待问题基本解决之后我再将发布正式版的 Web Combo Box, 这次代码里不支持一页面多个combo box (这个功能以后我再加上), 已实现的功能有: 可输入. 可立即保存. 可智能提示用户可输入的备选项.

<body onload="comboBox()">
<form name=form1>
<select id="MeizzComboBoxID">
<option>combo box</option>
<option value="11">疏影横斜水清浅</option>
<option value="22">暗香浮动月黄昏</option>
<option value="33">梅须逊雪三分白</option>
<option value="44">雪却输梅一段香</option>
<option value="55">梅花香自苦寒来</option>
</select>
</form>













<SCRIPT LANGUAGE="JavaScript"><!--
function comboBox()
{
combox = new MeizzComboBox();
}
function MeizzComboBox()
{ //作者: meizz(梅花雪) meizz@hzcnc.com
this.object = getObjectById("MeizzComboBoxID");
this.input = document.createElement("input");
this.div = document.createElement("div");
document.body.appendChild(this.input);
document.body.appendChild(this.div);
this.SS = this.object.style;
this.IS = this.input.style;
this.DS = this.div.style;

this.IS.fontSize = this.SS.fontSize = this.DS.fontSize = "12px";
this.IS.position = this.SS.position = this.DS.position = "absolute";
this.top = getObjectTop(this.object);
this.left = getObjectLeft(this.object);
this.width = this.object.clientWidth;
this.height = this.object.clientHeight;
this.DS.border = "1px solid #000000";
this.DS.display = "none";
this.DS.color = "#000000";
this.DS.overflow = "auto";
this.DS.overflowX = "hidden";
this.DS.padding = "2 0 8 0";
this.IS.cursor = "default";
this.IS.borderRight = "0px";
this.DS.backgroundColor = "#FFFFFF";

this.IS.top = this.top;
this.DS.top = this.top + this.height;
this.IS.left = this.DS.left = this.left;
this.IS.width = this.width-18;
this.DS.width = this.width;
this.SS.clip = "rect(0 "+ this.width +" "+ this.height +" "+ this.IS.width +")";

this.inputIndex = this.object.selectedIndex;
this.input.value = this.object.options[this.object.selectedIndex].text;
this.inputValue = this.object.options[this.object.selectedIndex].value;

this.candidateValue = ""; //候选条目的选中项的 value
this.candidateText = ""; //候选条目的选中项的 text
this.candidateFocus = null; //候选项的当前焦点项
this.divIndex = -1; //候选项的当前焦点项的索引值
this.clientInput = ""; //该变量用来记录用户的输入内容
this.candidateSelect = false; //判断当前是否正在选择候选
this.candidateHeight = 118; //候选条显示的高度值

this.object.onchange = comboxSelectChange;
this.object.onclick = comboxSelectChange;
this.input.onblur = comboxInputBlur;
this.input.onkeydown = comboxInputKeyDown;
this.div.onscroll = comboxDivScrolling;
this.div.onmousedown = comboxDivScrolling;
this.div.onblur = comboxDivHidden;
} var combox;