ComboBox插件
/************************************************************/
/*作者：yangsl
/*兼容：IE系列, MF火狐, Google Chrome
/************************************************************/
var Namespace = {
Register: function (fullNS) {
// 将命名空间切成N部分, 比如Grandsoft、GEA等
var nsArray = fullNS.split('.');
var sEval = "";
var sNS = "";
for (var i = 0; i < nsArray.length; i++) {
if (i != 0) sNS += ".";
sNS += nsArray[i];
// 依次创建构造命名空间对象（假如不存在的话）的语句
// 比如先创建Grandsoft，然后创建Grandsoft.GEA，依次下去
sEval += "if (typeof(" + sNS + ") == 'undefined') " + sNS + " = new Object();"
}
if (sEval != "") eval(sEval);
}
}
//公共方法 兼容浏览器
var CommonHelper = {
Top: function (node) {
var top = node.offsetTop;
while (node.offsetParent) {
node = node.offsetParent;
top += node.offsetTop;
}
return top;
},
Left: function (node) {
var left = node.offsetLeft;
while (node.offsetParent) {
node = node.offsetParent;
left += node.offsetLeft;
}
return left;
},
EventTarget: function () {
return CommonHelper.GetEvent().srcElement ? CommonHelper.GetEvent().srcElement : CommonHelper.GetEvent().target;
},
GetEvent: function () {
var e = window.event ? window.event : null;
if (!e) {
var caller = arguments.callee.caller;
while (caller.arguments.length == 0 || !caller.arguments[0].target) {
caller = caller.caller;
}
e = caller.arguments[0];
}
return e;
},
GetEventKeyCode: function () {
var code = this.GetEvent().keyCode ? this.GetEvent().keyCode : this.GetEvent().which;
return code;
},
// (mf) event.stopPropagation() = event.cancelBubble = true;
// (mf) event.preventDefault()=event.returnValue (ie)
CancelBublle: function () {
if (window.event)
this.GetEvent().cancelBubble = true;
else
this.GetEvent().stopPropagation();
},
BindEvent: function (target, name, fun) {
if (target.attachEvent)
target.attachEvent("on" + name, fun);
else
target.addEventListener(name, fun, false);
}
}
/*********************************************/
var ComboBox = function (id) {
/********公共属性**************************************/
this.ID = id;
this.HtmlControl = document.createElement("Div"); //DIV控件
this.HtmlControl.id = id;
this.HtmlControl.name = id;
this.HtmlControl._Object = this;
this.HtmlControl.className = "ComboBoxDivContent";
this.HtmlControl.style.backgroundColor = "white"; //防止背景图透明
this.HtmlControl.style.display = "none";
this.HtmlControl.style.zIndex = 100;
this.BindTarget = null; //绑定的文本框
this.TxtHidden = null; //存值的隐藏文件框
this.Items = []; //组合框的列表项
this.SelectedItem = null; //选中的项
this.NotifyValueChangeFun = null; //当值改变时通知的方法
this.DisplaySize = 10; //显示列表项数(不足则高度自适应，超出则滚动)
this.NotifyInterval = 500; //查询间隔(单位毫秒)
this.ListType = ComboBox.ListType.Combobox;
/********私有属性**************************************/
this._isInside = false; //标志光标是否在ComboBox范围内
this._timeoutID = null;
this._lastInput = null; //最后次输入的字符串
/******************************************************/
if (typeof ComboBox._Init == "undefined") {
ComboBox.Document_OnMouseDown = function (targetID) {
var comboBox = document.getElementById(targetID)._Object;
if (CommonHelper.EventTarget().id != comboBox.BindTarget.id && !comboBox._isInside) {
//隐藏ComboBox
comboBox.Hidden();
}
}
ComboBox.ComboBox_OnMouseMove = function () {
CommonHelper.EventTarget()._Object._isInside = true;
}
ComboBox.ComboBox_OnMouseOut = function () {
CommonHelper.EventTarget()._Object._isInside = false;
}
ComboBox.BindTarget_OnClick = function () {
CommonHelper.EventTarget()._Object.Show();
}
ComboBox.BindTarget_OnKeyUp = function () {
var comboBox = CommonHelper.EventTarget()._Object;
if (!comboBox.NotifyValueChangeFun)
return;
if (CommonHelper.GetEventKeyCode() == 13)
return;
if (comboBox.ListType == ComboBox.ListType.DropDownList) {
return; //不根据内容过滤下拉列表
}
//若还未开始输入，且输入框的值是空的时候
if (!comboBox._lastInput && comboBox.BindTarget.value == "")
return;
if (comboBox._lastInput && comboBox.BindTarget.value == comboBox._lastInput) {
return;
}
comboBox._lastInput = comboBox.BindTarget.value;
if (this._timeoutID) {
window.clearTimeout(this._timeoutID);
this._timeoutID = window.setTimeout(new Function("document.getElementById('" + comboBox.ID
+ "')._Object.NotifyValueChangeFun('" + comboBox.BindTarget.value + "')"), 300);
}
else {
this._timeoutID = window.setTimeout(new Function("document.getElementById('" + comboBox.ID
+ "')._Object.NotifyValueChangeFun('" + comboBox.BindTarget.value + "')"), 100);
}
}
ComboBox.BindTarget_OnKeyDown = function (targetID) {
var keyCode = CommonHelper.GetEventKeyCode();
var comboBox = CommonHelper.EventTarget()._Object;
//方向键 ↑↓
if (keyCode == 40 || keyCode == 38) {
var curIndex = -1;
for (var i = 0; i < comboBox.Items.length; i++) {
if (comboBox.Items[i].IsSelected) {
curIndex = i;
}
comboBox.Items[i].Selected(false);
}
if (keyCode == 40) {//向下↓
if (curIndex + 1 < comboBox.Items.length)
comboBox.Items[curIndex + 1].Selected(true);
}
else {//向上↑
if (curIndex == -1) curIndex = comboBox.Items.length;
if (curIndex - 1 >= 0)
comboBox.Items[curIndex - 1].Selected(true);
}
}
else if (keyCode == 13) { //Enter
var curIndex = -1;
for (var i = 0; i < comboBox.Items.length; i++) {
if (comboBox.Items[i].IsSelected) {
curIndex = i;
break;
}
}
if (curIndex != -1)
comboBox.ItemOK(comboBox.Items[curIndex]);
comboBox.BindTarget.blur();
window.setTimeout("document.getElementById('" + targetID + "')._Object.BindTarget.focus();", 100);
//CommonHelper.CancelBublle();
return false;
}
}
ComboBox._Init = true;
}
}
/*********************对象方法***************************/
ComboBox.prototype = {
//绑定
Bind: function (txtInput, txtHidden) {
this.BindTarget = txtInput;
this.BindTarget._Object = this;
this.TxtHidden = txtHidden;
if (arguments.length == 3)
this.NotifyValueChangeFun = arguments[2];
//绑定事件
CommonHelper.BindEvent(this.BindTarget, "click", ComboBox.BindTarget_OnClick);
CommonHelper.BindEvent(this.BindTarget, "keyup", ComboBox.BindTarget_OnKeyUp);
CommonHelper.BindEvent(this.BindTarget, "keydown", new Function("ComboBox.BindTarget_OnKeyDown('" + this.ID + "');"));
CommonHelper.BindEvent(window.document, "mousedown", new Function("ComboBox.Document_OnMouseDown('" + this.ID + "');"));
CommonHelper.BindEvent(this.HtmlControl, "mousemove", ComboBox.ComboBox_OnMouseMove);
CommonHelper.BindEvent(this.HtmlControl, "mouseout", ComboBox.ComboBox_OnMouseOut);
document.body.appendChild(this.HtmlControl);
},
//设置高度
SetHeight: function (height) {
this.HtmlControl.style.height = parseInt(height) + "px";
},
//设定位置
SetPosition: function () {
this.HtmlControl.style.width = this.BindTarget.offsetWidth + "px";
this.HtmlControl.style.top = (CommonHelper.Top(this.BindTarget) + this.BindTarget.offsetHeight) + "px";
this.HtmlControl.style.left = CommonHelper.Left(this.BindTarget) + "px";
if (this.Items.length > 0) {
var height = 0;
for (var i = 0; i < this.DisplaySize; i++) {
if (this.Items[i])
height += this.Items[i].HtmlControl.offsetHeight;
}
this.HtmlControl.style.height = height + "px";
}
//针对定位不准确的问题
var diff = this.HtmlControl.offsetWidth - this.BindTarget.offsetWidth;
if (diff > 0) {
this.HtmlControl.style.width = this.BindTarget.offsetWidth - diff + "px";
}
else if (diff < 0) {
this.HtmlControl.style.width = this.BindTarget.offsetWidth + diff + "px";
}
},
//添加列表项
Add: function (objParam) {
var item = new ComboBox.ListItem();
item.Text = objParam.Text;
item.Value = objParam.Value;
if (objParam.Display && objParam.DisplayType)
item.SetDisplay(objParam.Display, ComboBox.DisplayType.HTML);
else
item.SetDisplay(objParam.Text);
if (objParam.SearchText)
item.SearchText = objParam.SearchText;
item.Parent = this;
this.Items.push(item);
this.HtmlControl.appendChild(item.HtmlControl);
},
AddItems: function (arrParam) {
for (var i = 0; i < arrParam.length; i++) {
this.Add(arrParam[i]);
}
},
BindItems: function (arrParam) {
this.Clear();
this.AddItems(arrParam);
this.Show();
},
//清除所有列表项
Clear: function () {
for (var i = this.Items.length - 1; i >= 0; i--) {
this.Items[i].HtmlControl.parentNode.removeChild(this.Items[i].HtmlControl);
}
this.Items.length = 0;
this.SelectedItem = null;
},
//将所有子项设置未选中
CancelSelectedItems: function () {
for (var i = this.Items.length - 1; i >= 0; i--) {
this.Items[i].Selected(false);
}
},
//确认选择指定选项
ItemOK: function (item) {
this.BindTarget.value = item.Text;
this.SelectedItem = item;
this._lastInput = item.Text;
this.TxtHidden.value = item.Value;
this.Hidden();
this.BindTarget.blur();
window.setTimeout("document.getElementById('" + this.BindTarget.id + "').focus();", 100);
},
Show: function () {
if (this.Items.length > 0) {
this.HtmlControl.style.display = "block";
//设置定位时，你定要将对象显示才能有效
this.SetPosition();
}
else
this.HtmlControl.style.display = "none";
this.BindTarget.focus();
},
Hidden: function () {
this.HtmlControl.style.display = "none";
}
}
ComboBox.ListType = {
Combobox: 1, //复合下拉框，根据输入的内容过滤无效行
DropDownList: 2 //下拉框，不会根据输入的内容过滤
}
ComboBox.DisplayType = {
Text: 1,
HTML: 2
}
ComboBox.ListItem = function () {
this.Text = "";
this.Value = "";
this.Display = ""; //显示的内容
this.DisplayType = ComboBox.DisplayType.Text;
this.SearchText = ""; //过滤的文本
this.HtmlControl = document.createElement("Div");
this.HtmlControl._Object = this;
this.Parent = null;
this.IsSelected = false;
if (typeof ComboBox.ListItem._Init == "undefined") {
ComboBox.ListItem.Item_OnMouseDown = function () {
var item = CommonHelper.EventTarget()._Object;
item.Parent.ItemOK(item);
}
ComboBox.ListItem.Item_OnMouseMove = function () {
var item = CommonHelper.EventTarget()._Object;
item.Parent.CancelSelectedItems();
item.Selected(true);
}
ComboBox.ListItem._Init = true;
}
//绑定Item的事件
CommonHelper.BindEvent(this.HtmlControl, "mousedown", ComboBox.ListItem.Item_OnMouseDown);
CommonHelper.BindEvent(this.HtmlControl, "mousemove", ComboBox.ListItem.Item_OnMouseMove);
}
ComboBox.ListItem.prototype =
{
//显示文本
Selected: function (blRlt) {
if (blRlt) {
this.IsSelected = true;
this.HtmlControl.style.backgroundColor = "#E2EAFF";
}
else {
this.IsSelected = false;
this.HtmlControl.style.backgroundColor = "white";
}
},
//显示文本
SetDisplay: function (display) {
this.Display = display;
if (arguments.length == 2)
this.DisplayType = arguments[1];
else
this.DisplayType = ComboBox.DisplayType.Text;
if (this.DisplayType == ComboBox.DisplayType.Text)
this.HtmlControl.appendChild(document.createTextNode(this.Display));
else if (this.DisplayType == ComboBox.DisplayType.HTML)
this.HtmlControl.innerHTML = this.Display;
},
//清除显示
ClearDisplay: function () {
for (var i = this.ItemControl.childNodes.length - 1; i >= 0; i--) {
this.HtmlControl.childNodes[i].parentNode.removeChild(this.ItemControl.childNodes[i]);
}
}
}
//用到的样式
.ComboBoxDivContent
{
border: 1px solid #817F82;
width: 250px;
height: 60px;
position: absolute;
font: normal normal bold 11/11 @宋体;
text-align: left;
overflow: hidden;
overflow-y: auto;
}
.ComboBoxDivContent DIV
{
display: block;
cursor: pointer;
width: 100%;
float: left;
padding: 0px 3px 0px 3px;
margin: 0px;
white-space: nowrap;
font: 16px arial;
background-color: White;
}
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步