Javascript xml is the drop-down box control of the data source.

For example, if you enter Michael Jacob or Changsha or Hunan in the input box, Michael Jacob will make you choose. If you enter 18, Michael Jacob will appear at the same time.
The test data source is as follows:
Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
<Students>
<Student>
<Id> s1 </id>
<Name> Zhang San </name>
<Province> Hunan </province>
<City> Changsha </city>
<Age> 18 </age>
</Student>
<Student>
<Id> s2 </id>
<Name> Li Si </name>
<Province> Hubei </province>
<City> Wuhan </city>
<Age> 18 </age>
</Student>
<Student>
<Id> s3 </id>
<Name> Wang Wu </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; // whether data is represented by attributes or node
This. mainText = ""; // field name to be displayed
This. mainValue = ""; // field name of the value to be returned
This. selectedIndex =-1; // selected index
This. mouseoverIndex =-1; // index of the mouse when the cursor stops
This. mouseoutIndex =-1; // index of the mouse when the mouse is started
This. selectedValue = "";
This. selectedText = "";
This. value = "";
This. text = "";
This. drawed = false; // indicates whether the operation has been retained.
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.doc ument. attachEvent ("onclick", function ()
{
// It is possible that e is not at the top, so you need to find its region
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 ();
}
});
}
// Re-extract the location, because the location of the 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.performance.doc umentElement. 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; cursor: 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, select
This. nodeList = this.performance.doc umentElement. childNodes;
If (this. onhide! = Null)
This. onhide. apply (this );
}
DropDownListx. prototype. setSource = function (d)
{
This. dataSource. loadXML (d. xml );
This. nodeList = d.doc umentElement. childNodes;
This. drawed = false;
}
DropDownListx. prototype. setChildNodes = function (nodes)
{
This. dataSource. loadXML ("<? Xml version = \ "1.0 \" encoding = \ "UTF-8 \"?> <Options> </options> ");
Var node = this.cece.doc umentElement;
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.performance.doc umentElement. selectNodes (str );
}
This. listData ();
}
// Query the value of the child node of the selected node
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.performance.doc umentElement. 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.performance.doc umentElement. childNodes;
This. selectedIndex = index; // The 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) // copy of the event that does not apply
{
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) // copy of the event that does not apply
{
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.performance.doc umentElement. childNodes;
This. selectedIndex = index; // The 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) // copy of the event that does not apply
{
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) // copy of the event that does not apply
{
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 lower limit box. It 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>
/// Obtain the position of the drop-down box again, because the location of the parent may change.
/// </Summary>
},
Show: function ()
{
/// <Summary>
/// Display the drop-down list
/// </Summary>
},
ListData: function ()
{
/// <Summary>
/// Draw a drop-down box
/// </Summary>
},
Hide: function ()
{
/// <Summary>
/// Hide the drop-down list
/// </Summary>
},
SetSource: function (d)
{
/// <Summary>
/// Set the xml data source in the drop-down box
/// </Summary>
/// <Param name = "d" type = "Objec">
/// Xml data source in the drop-down list to be specified
/// </Param>
},
SetChildNodes: function (nodes)
{
/// <Summary>
/// Set the xml data source in the drop-down box
/// </Summary>
/// <Param name = "nodes" type = "Objec">
/// Xml node set in the drop-down list to be specified
/// </Param>
},
Filter: function (text)
{
/// <Summary>
/// Globally filter the drop-down list
/// </Summary>
/// <Param name = "text" type = "String">
/// Enter the keyword to be searched
/// </Param>
},
GetNodeValue: function (nodeName)
{
/// <Summary>
/// Return the value of the child node corresponding to the selected node
/// </Summary>
/// <Param name = "nodeName" type = "String">
/// Subnode name
/// </Param>
},
Reset: function ()
{
/// <Summary>
/// Reset the drop-down list
/// </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 be selected. The value is compared with the node corresponding to the mainText attribute.
/// </Param>
},
SelectByValue: function (value)
{
/// <Summary>
/// Select by value
/// </Summary>
/// <Param name = "value" type = "String">
/// The value to be selected. The value is compared with the node corresponding to the mainValue attribute.
/// </Param>
},
_ Select: function (index)
{
/// <Summary>
/// Select by index. The select method does not respond to the event copy.
/// </Summary>
/// <Param name = "index" type = "Int">
/// Index value
/// </Param>
},
_ SelectByName: function (name)
{
/// <Summary>
/// Select by text. The selectByName method does not respond to the event copy.
/// </Summary>
/// <Param name = "name" type = "String">
/// The text to be selected. The value is compared with the node corresponding to the mainText attribute.
/// </Param>
},
_ SelectByValue: function (value)
{
/// <Summary>
/// Select by value. The selectByValue method does not respond to the event copy.
/// </Summary>
/// <Param name = "value" type = "String">
/// The value to be selected. The value is compared with the node corresponding to the mainValue attribute.
/// </Param>
}
}