For example, when you enter Zhang San, Changsha, or Hunan in the input box, Zhang San will appear for you to choose. Enter 18, and Zhang San and Li Si will appear at the same time. The test data source is as follows:
s1
Zhang San
Hunan
Changsha
18
s2< ;/id>
李思
Hubei
Wuhan
s3
王五
Sichuan
Chengdu
20
//--------------------------------------------- DropDownListx.js---------------------
function DropDownListx(parent,id)
{
this.id = id;
var i;
var me = this;
this.parent = parent;
var e = this.parent;
var y = e.offsetTop;
var x = e .offsetLeft;
this.text = e.value;
while (e = e.offsetParent)
{
y = e.offsetTop;
x = e.offsetLeft;
}
this.parentInfo = {x:0,y:0};
this.parentInfo.x = x;
this.parentInfo.y = y;
//Appearance
this .width = this.parent.offsetWidth;
this.height = 150;
this.disabled = false;
this.visibility = "hidden";
this.attributed = false;//data Whether it is expressed as an attribute, it can also be expressed by node
this.mainText = "";//The name of the field to be displayed
this.mainValue = "";//The name of the field of the value to be returned
this.selectedIndex = -1;//The selected index
this.mouseoverIndex = -1;//The index when the mouse hovers
this.mouseoutIndex = -1;//The index when the mouse leaves
this.selectedValue = "";
this.selectedText = "";
this.value = "";
this.text = "";
this.drawed = false; // means Has it been redrawn?
this.table = null;
//Data source
this.dataSource = null;
try
{
for(i = 6;i>0; i--)
{
try
{
this.dataSource = new ActiveXObject("MSXML2.DOMDocument." i ".0");
break;
}
catch(ex1){;};
}
}
catch(ex2){;};
this.dataSource.async = false;
this.dataSource.setProperty(" SelectionLanguage ", "XPath");
var sh = function(){if(me.visibility == "hidden")me.show();};
this.parent.attachEvent("onfocus", function (){window.setTimeout(sh,100);});
this.parent.attachEvent("onchange",function(){me.filter(me.parent.value);});
this .parent.attachEvent("onkeyup",function(){me.filter(me.parent.value);});
this.parent.attachEvent("onclick",function(){if(event.button = = "1")window.setTimeout(sh,10);});
this.parent.style.cursor = "hand";
//Event
this.onSelected=null;
this.onmouseover = null;
this.onmouseout = null;
this.onhide = null;
window.document.attachEvent("onclick",function()
{
//Yes Maybe e is not at the top, so find its area
if(event.x < me.parentInfo.x ||
event.x > me.parentInfo.x me.parent.offsetWidth ||
event.y < me.parentInfo.y ||
event.y > me.parentInfo.y me.parent.offsetHeight)
{
if(me.visibility == "visible " )
me.hide();
}
});
}
//Reacquire the position because the parent’s position may change
DropDownListx.prototype.getPosition=function ( )
{
var e = this.parent;
var y = e.offsetTop;
var x = e.offsetLeft;
while (e = e.offsetParent)
{
y = e.offsetTop;
x = e.offsetLeft;
}
this.parentInfo = {x:0,y:0};
this.parentInfo.x = x;
this.parentInfo.y = y;
this.width = this.parent.offsetWidth;
}
//Draw the list
DropDownListx.prototype.show=function()
{
this.getPosition();
var me = this;
//Draw a div
var divid = this.id "_div_" this.parent.id;
var d = document.getElementById(divid);
if(d==null)
{
d = document.createElement("div");
d.style.position = "absolute";
}
d.style.borderLeft = "black 1px groove";
d.style.borderTop = "black 1px groove";
d.style.borderRight = "black 1px groove";
document.body.appendChild(d);
d.setAttribute("id",divid);
d.style.borderBottom = "black 1px groove";
d.style.backgroundColor = " white ";
d.style.left = this.parentInfo.x "px";
if(document.body.clientHeight < this.parentInfo.y this.parent.offsetHeight this.height)
d .style.top = (this.parentInfo.y - this.height) "px";
else
d.style.top = (this.parentInfo.y ( this.parent.offsetHeight=="" ? 20:this.parent.offsetHeight)) "px";
d.style.overflowX = "hidden";
d.style.overflowY = "auto";
d.style.zIndex = 999;
d.style.visibility = "visible";
d.style.borderWidth = "1px";
this.visibility = "visible";
this.listData();
this ._selectByName(this.parent.value);
}
DropDownListx.prototype.listData=function()
{
var e = this.parent;
var base = this;
//Display data
if(this.nodeList == null)
this.nodeList = this.dataSource.documentElement.childNodes;
var str="";
for(var i = 0;i{
var text = (base.attributed?this.nodeList.item(i).getAttribute(this.mainText):this.nodeList.item(i).selectSingleNode(this.mainText).text);
str = str "| " text " |
";
}
str = "
";
var div = document.getElementById( this.id "_div_" e.id);
div.innerHTML = str;
var table = document.getElementById( this.id "_table_" e.id);
this.table = table;
if(table.offsetHeight < this.height)
div.style.height = table.offsetHeight 3;
else
div.style.height = this.height 3;
div.style.width = table.offsetWidth;
for(var j = 0;j{
var d = document.getElementById(this.id "_td_" j "_" e.id );
d.attachEvent('onclick',function()
{
var _td = document.getElementById(base.id "_td_" base.selectedIndex "_" e.id);
if(_td)
{
_td.style.backgroundColor = "";
_td.style.color = "";
}
base.selectedIndex = event.srcElement.parentElement.rowIndex;
document.getElementById(base.id "_div_" base.parent.id ).style.visibility="hidden";
base.selectedValue = (base.attributed?base.nodeList.item(base.selectedIndex).getAttribute(base.mainValue):base.nodeList.item(base.selectedIndex).selectSingleNode(base.mainValue).text);
base.selectedText = (base.attributed?base.nodeList.item(base.selectedIndex).getAttribute(base.mainText):base.nodeList.item(base.selectedIndex).selectSingleNode(base.mainText).text);
base.value = base.selectedValue;base.text = base.selectedText;
if(base.onSelected != null)
base.onSelected.apply(base);
return false;
});
d.onmouseover=function()
{
base.mouseoverIndex =parseInt(event.srcElement.id.split("_td_")[1].split("_")[0]);
try
{
event.srcElement.style.backgroundColor='gray';
event.srcElement.style.color='white';
e.value = event.srcElement.innerText;
if(base.onmouseover != null)
base.onmouseover.apply(base);
}
catch(ex){};
};
d.onmouseout = function()
{
base.mouseoutIndex = parseInt(event.srcElement.id.split("_td_")[1].split("_")[0]);
if(event.srcElement.id == base.id "_td_" base.selectedIndex "_" e.id)
{
event.srcElement.style.backgroundColor='red';
event.srcElement.style.color='blue';
}
else
{
event.srcElement.style.backgroundColor='';
event.srcElement.style.color='';
}
if(base.onmouseout != null)
base.onmouseout.apply(base);
}
}
this.drawed = true;
}
DropDownListx.prototype.hide=function()
{
var d = document.getElementById(this.id "_div_" this.parent.id);
if(d)
d.style.visibility = "hidden";
this.visibility = "hidden";
this._select(this.selectedIndex);//为了防止有筛选的数据，要先选择
this.nodeList = this.dataSource.documentElement.childNodes;
if(this.onhide != null)
this.onhide.apply(this);
}
DropDownListx.prototype.setSource=function(d)
{
this.dataSource.loadXML(d.xml);
this.nodeList = d.documentElement.childNodes;
this.drawed = false;
}
DropDownListx.prototype.setChildNodes=function(nodes)
{
this.dataSource.loadXML("");
var node = this.dataSource.documentElement;
for(var i = 0;i{
var opt = doc.createNode(1,"option","");
var r = nodes.item(i).childNodes
for(var j = 0;j{
var att = doc.createNode(1,r.item(j).nodeName,"");
att.text = r.item(j).text;
opt.appendChild(att);
}
node.appendChild(opt);
}
this.drawed = false;
}
DropDownListx.prototype.filter=function(text)
{
if(text==null || text =="")
{
this.reset();
}
else
{
var _text = text.split(" ");
var str = "./*[contains(.,'" _text[0] "')";
for(var i=1;i<_text.length;i )
{
str = str " and contains(.,'" _text[i] "')"
}
str = str "]";
this.nodeList = this.dataSource.documentElement.selectNodes(str);
}
this.listData();
}
//根据查询选中的节点的子节点的值
DropDownListx.prototype.getNodeValue=function(nodeName)
{
if(nodeName == null || nodeName == "")
return this.value;
return (this.attributed?this.nodeList.item(this.selectedIndex).getAttribute(nodeName):this.nodeList.item(this.selectedIndex).selectSingleNode(nodeName).text);
}
DropDownListx.prototype.reset=function()
{
this.nodeList = this.dataSource.documentElement.childNodes;
var _td = document.getElementById(this.id "_td_" this.selectedIndex "_" this.parent.id);
if(_td)
{
_td.style.backgroundColor = "";
_td.style.color = "";
}
this.selectedIndex = -1;
this.selectedValue = "";
this.selectedText = "";
this.value = "";
this.text = "";
this.parent.value = "";
}
DropDownListx.prototype.select=function(index)
{
if(index == -1)
this.reset();
else
{
var _td = document.getElementById(this.id "_td_" this.selectedIndex "_" this.parent.id);
if(_td)
{
_td.style.backgroundColor = "";
_td.style.color = "";
}
this.nodeList = this.dataSource.documentElement.childNodes;
this.selectedIndex = index;//被選中的索引
this.selectedValue = this.attributed?this.nodeList.item(index).getAttribute(this.mainValue):this.nodeList.item(index).selectSingleNode(this.mainValue).text;
this.selectedText = this.attributed?this.nodeList.item(index).getAttribute(this.mainText):this.nodeList.item(index).selectSingleNode(this.mainText).text;
this.value = this.selectedValue;
this.text = this.selectedText;
this.parent.value = this.selectedText;
try
{
this.table.rows.item(index).cells.item(0).focus();
this.table.rows.item(index).cells.item(0).style.backgroundColor = "red";
this.table.rows.item(index).cells.item(0).style.color = "blue";
this.parent.focus();
}catch(ex){}
if(this.onSelected != null)
this.onSelected.apply(this);
}
}
DropDownListx.prototype.selectByName=function(name)
{
if(name == null || name == "")
{
this.reset();
return;
}
for(var i = 0;i{
var _name = this.attributed?this.nodeList.item(i).getAttribute(this.mainText):this.nodeList.item(i).selectSingleNode(this.mainText).text;
if(_name == name) break;
}
if(i != this.nodeList.length)
{
this.select(i);
}
else
this.reset();
}
DropDownListx.prototype.selectByValue=function(value)//不響應事件的副本
{
if(value == null || value == "")
{
this.reset();
return;
}
for(var i = 0;i{
var _value = this.attributed?this.nodeList.item(i).getAttribute(this.mainValue):this.nodeList.item(i).selectSingleNode(this.mainValue).text;
if(_value == value) break;
}
if(i != this.nodeList.length)
{
this.select(i);
}
else
this.reset();
}
DropDownListx.prototype._select=function(index)//不響應事件的副本
{
if(index == -1)
this.reset();
else
{
var _td = document.getElementById(this.id "_td_" this.selectedIndex "_" this.parent.id);
if(_td)
{
_td.style.backgroundColor = "";
_td.style.color = "";
}
//this.nodeList = this.dataSource.documentElement.childNodes;
this.selectedIndex = index;//被選中的索引
this.selectedValue = this.attributed?this.nodeList.item(index).getAttribute(this.mainValue):this.nodeList.item(index).selectSingleNode(this.mainValue).text;
this.selectedText = this.attributed?this.nodeList.item(index).getAttribute(this.mainText):this.nodeList.item(index).selectSingleNode(this.mainText).text;
this.value = this.selectedValue;
this.text = this.selectedText;
this.parent.value = this.selectedText;
try
{
this.table.rows.item(index).cells.item(0).focus();
this.table.rows.item(index).cells.item(0).style.backgroundColor = "red";
this.table.rows.item(index).cells.item(0).style.color = "blue";
this.parent.focus();
}catch(ex){}
}
}
DropDownListx.prototype._selectByName=function(name)//不響應事件的副本
{
if(name == null || name == "")
{
this.reset();
return;
}
for(var i = 0;i{
var _name = this.attributed?this.nodeList.item(i).getAttribute(this.mainText):this.nodeList.item(i).selectSingleNode(this.mainText).text;
if(_name == name) break;
}
if(i != this.nodeList.length)
{
this._select(i);
}
else
this.reset();
}
DropDownListx.prototype._selectByValue=function(value)//不響應事件的副本
{
if(value == null || value == "")
{
this.reset();
return;
}
for(var i = 0;i{
var _value = this.attributed?this.nodeList.item(i).getAttribute(this.mainValue):this.nodeList.item(i).selectSingleNode(this.mainValue).text;
if(_value == value) break;
}
if(i != this.nodeList.length)
{
this._select(i);
}
else
this.reset();
}
//---------------------------------------------DropDownListx-vsdoc.js------------------------
///
function DropDownListx(parent, id)
{
///
/// 自定义的下拉框类
///
///
///
/// 下柆框的父控件，只能是文本输入框元素;
///
///
///
/// 下拉框的ID的文本
///
}
DropDownListx.prototype =
{
getPosition: function()
{
///
/// Re-obtain the position of the drop-down box because of the position of the parent May change
///
},
show: function()
{
///
/// Show drop-down box
///
},
listData: function()
{
///
/// Draw drop-down box
///
},
hide: function()
{
///
/// Hide drop-down box
///
},
setSource: function(d)
{
///
/// Set the drop-down box xml data source
// /
///
/// The xml data source of the drop-down box to be specified
/// < /param>
},
setChildNodes: function(nodes)
{
///
/// Set the drop-down box xml data source
/// < ;/summary>
///
/// The xml node set of the drop-down box to be specified
/// },
filter: function(text)
{
///
/// Globally filter the drop-down box
///
///
/// The text to be found
///
},
getNodeValue: function(nodeName)
{
///
/// Returns the value of the child node corresponding to the selected node
///
///
/// Child node name
///
},
reset: function()
{
///
/// Reset drop-down box
///
},
select: function( index)
{
///
/// Select by index
///
///
/// Index value
///
},
selectByName:function(name)
{
// /
/// Select by text
///
///
/// The text to be selected, this value will be compared with the node corresponding to the mainText attribute
///
},
selectByValue:function(value)
{
///
/// Select by value
///
///
/// The value to be selected, this value will be compared with the node corresponding to the mainValue attribute
///
},
_select:function(index )
{
///
/// Select by index, the select method does not respond to a copy of the event
///
///
/// Index value
///
},
_selectByName:function(name)
{
///
/// Select by text, the selectByName method does not respond to the copy of the event
///
///
/// The text to be selected, this value will be compared with the node corresponding to the mainText attribute
///
},
_selectByValue:function(value)
{
///
/// Select by value, the selectByValue method does not respond to the copy of the event
/// < ;/summary>
///
/// The value to be selected, this value will be compared with the node corresponding to the mainValue attribute
///
}
}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
