For example, when you enter John or Changsha in the input box, or Hunan, there will be Zhang three let you choose, enter 18, will appear dick
Test data sources are as follows:
Copy Code code as follows:
<?xml version= "1.0" encoding= "Utf-8"?>
<students>
<student>
<id>s1</id>
<name> John </name>
<province> Hunan </province>
<city> Changsha </city>
<age>18</age>
</student>
<student>
<id>s2</id>
<name> Dick </name>
<province> Hubei </province>
<city> Wuhan </city>
<age>18</age>
</student>
<student>
<id>s3</id>
<name> Harry </name>
<province> Sichuan </province>
<city> Chengdu </city>
<age>20</age>
</student>
</students>
---------------------------------------------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 is represented by attributes or node
This.maintext = "";//the name of the field to display
This.mainvalue = "";//the field name of the value to be returned
This.selectedindex = -1;//Selected index
This.mouseoverindex = index of -1;//mouse stop
This.mouseoutindex = index of -1;//mouse
This.selectedvalue = "";
This.selectedtext = "";
This.value = "";
This.text = "";
this.drawed = false;//Indicates whether it has been repeated
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 ()
{
It's possible that e is not on the top, so find out where it is.
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 ();
}
});
}
Regain position because the position of parent 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 a 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= "<table id = \" "+ this.id +" _table_ "+ e.id +" \ "width=\" "+ (This.width) +" px\ "height=\" 24px\ "" > ";
for (var i = 0;i<this.nodelist.length;i++)
{
var text = (Base.attributed?this.nodelist.item (i). getattribute (This.maintext): This.nodeList.item (i). selectSingleNode (this.maintext). Text);
str = str + "<TR><TD id = \" "+ this.id +" _td_ "+ i +" _ "+ e.id +" \ style=\ "Border-bottom:black 1px dotted;c Ursor:hand\ ">" + text + "</td></tr>";
}
STR + + "</table>";
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<this.nodelist.length;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); To prevent filtered data, first select
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 ("<?xml version=\" 1.0\ "encoding=\" utf-8\ "?><options></options>");
var node = this.dataSource.documentElement;
for (var i = 0;i<nodes.length;i++)
{
var opt = Doc.createnode (1, "option", "");
var r = Nodes.item (i) childnodes
for (var j = 0;j<r.length;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 ();
}
The value of the child node of the node selected by the query
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;//Selected 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<this.nodelist.length;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)//non-impact event copy
{
if (value = NULL | | value = = "")
{
This.reset ();
Return
}
for (var i = 0;i<this.nodelist.length;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)//No response to a copy of the event
{
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;//Selected 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)//non-impact copy of event
{
if (name = = NULL | | name = = "")
{
This.reset ();
Return
}
for (var i = 0;i<this.nodelist.length;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)//non-impact event copy
{
if (value = NULL | | value = = "")
{
This.reset ();
Return
}
for (var i = 0;i<this.nodelist.length;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------------------------
<reference name= "MicrosoftAjax.js"/>
function Dropdownlistx (parent, id)
{
<summary>
Custom Drop-down Box class
</summary>
</param>
<param name= "Parent" type= "Objec" >
The parent control of the bottom 柆 box, which can only be a text input box element;
</param>
</param>
<param name= "id" type= "String" >
Text of the ID of the Drop-down box
</param>
}
Dropdownlistx.prototype =
{
Getposition:function ()
{
<summary>
Retrieves the position of the Drop-down box because the location of parent may change
</summary>
},
Show:function ()
{
<summary>
Show dropdown box
</summary>
},
Listdata:function ()
{
<summary>
Draw a Drop-down box
</summary>
},
Hide:function ()
{
<summary>
Hide drop down box
</summary>
},
Setsource:function (d)
{
<summary>
Set the Drop-down box XML data source
</summary>
<param name= "D" type= "Objec" >
The XML data source for the Drop-down box you want to specify
</param>
},
Setchildnodes:function (nodes)
{
<summary>
Set the Drop-down box XML data source
</summary>
<param name= "Nodes" type= "Objec" >
The XML node set of the Drop-down box to specify
</param>
},
Filter:function (text)
{
<summary>
To filter the dropdown box globally
</summary>
<param name= "text" type= "String" >
To find the text in vain
</param>
},
Getnodevalue:function (nodename)
{
<summary>
Returns the value of the child node for the selected node
</summary>
<param name= "nodename" type= "String" >
Sub-section Roll Call
</param>
},
Reset:function ()
{
<summary>
Reset Drop-down Box
</summary>
},
Select:function (Index)
{
<summary>
Select by index
</summary>
<param name= "index" type= "Int" >
Index value
</param>
},
Selectbyname:function (name)
{
<summary>
Select by text
</summary>
<param name= "name" type= "String" >
The text to select, and this value will be compared to the node corresponding to the Maintext property
</param>
},
Selectbyvalue:function (value)
{
<summary>
Select by value
</summary>
<param name= "value" type= "String" >
The value to select, which will be compared to the node corresponding to the Mainvalue property
</param>
},
_select:function (Index)
{
<summary>
Select by index, the Select method does not respond to a copy of the event
</summary>
<param name= "index" type= "Int" >
Index value
</param>
},
_selectbyname:function (name)
{
<summary>
Select by text, the Selectbyname method does not respond to a copy of the event
</summary>
<param name= "name" type= "String" >
The text to select, and this value will be compared to the node corresponding to the Maintext property
</param>
},
_selectbyvalue:function (value)
{
<summary>
Select by value and the Selectbyvalue method does not respond to a copy of the event
</summary>
<param name= "value" type= "String" >
The value to select, which will be compared to the node corresponding to the Mainvalue property
</param>
}
}
