例如，当你在输入框中输入张三或是长沙，或是湖南，都会出现张三让你选择，输入18，将同时出现张三李四
测试数据源如下：
复制代码 代码如下:
<?xml version="1.0" encoding="utf-8" ?>
<students>
<student>
<id>s1</id>
<name>张三</name>
<province>湖南</province>
<city>长沙</city>
<age>18</age>
</student>
<student>
<id>s2</id>
<name>李四</name>
<province>湖北</province>
<city>武汉</city>
<age>18</age>
</student>
<student>
<id>s3</id>
<name>王五</name>
<province>四川</province>
<city>成都</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;
//外观
this.width = this.parent.offsetWidth;
this.height = 150;
this.disabled = false;
this.visibility = "hidden";
this.attributed = false;//数据是否以属性表示,也可以用node来表示
this.mainText = "";//要显示的字段名字
this.mainValue = "";//要返回的值的字段名字
this.selectedIndex = -1;//被選中的索引
this.mouseoverIndex = -1;//鼠標懸停時的索引
this.mouseoutIndex = -1;//鼠標離開時的索引
this.selectedValue = "";
this.selectedText = "";
this.value = "";
this.text = "";
this.drawed = false;//表示是否重繪過
this.table = null;
//数据源
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";
//事件
this.onSelected=null;
this.onmouseover = null;
this.onmouseout = null;
this.onhide = null;
window.document.attachEvent("onclick",function()
{
//有可能e不在最上層,所以要找到牠的區域
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();
}
});
}
//重新獲取位置,因爲parent的位置可能變動
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;
}
//画出列表
DropDownListx.prototype.show=function()
{
this.getPosition();
var me = this;
//画一个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;
//显示数据
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;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);//为了防止有筛选的数据，要先选择
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();
}
//根据查询选中的节点的子节点的值
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<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)//不響應事件的副本
{
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)//不響應事件的副本
{
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<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)//不響應事件的副本
{
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>
/// 自定义的下拉框类
/// </summary>
/// </param>
/// <param name="parent" type="Objec">
/// 下柆框的父控件，只能是文本输入框元素;
/// </param>
/// </param>
/// <param name="id" type="String">
/// 下拉框的ID的文本
/// </param>
}
DropDownListx.prototype =
{
getPosition: function()
{
/// <summary>
/// 重新获取下拉框的位置，因为parent的位置可能会变动
/// </summary>
},
show: function()
{
/// <summary>
/// 显示下拉框
/// </summary>
},
listData: function()
{
/// <summary>
/// 绘制下拉框
/// </summary>
},
hide: function()
{
/// <summary>
/// 隐藏下拉框
/// </summary>
},
setSource: function(d)
{
/// <summary>
/// 设置下拉框xml数据源
/// </summary>
/// <param name="d" type="Objec">
/// 要指定的下拉框的xml数据源
/// </param>
},
setChildNodes: function(nodes)
{
/// <summary>
/// 设置下拉框xml数据源
/// </summary>
/// <param name="nodes" type="Objec">
/// 要指定的下拉框的xml节点集
/// </param>
},
filter: function(text)
{
/// <summary>
/// 对下拉框进行全局筛选
/// </summary>
/// <param name="text" type="String">
/// 要查找的文枉
/// </param>
},
getNodeValue: function(nodeName)
{
/// <summary>
/// 返回选中节点对应的子节点的值
/// </summary>
/// <param name="nodeName" type="String">
/// 子节点名
/// </param>
},
reset: function()
{
/// <summary>
/// 重置下拉框
/// </summary>
},
select: function(index)
{
/// <summary>
/// 按索引进行选择
/// </summary>
/// <param name="index" type="Int">
/// 索引值
/// </param>
},
selectByName:function(name)
{
/// <summary>
/// 按文本进行选择
/// </summary>
/// <param name="name" type="String">
/// 要选择的文本,此值将会与mainText属性所对应的节点进行对比
/// </param>
},
selectByValue:function(value)
{
/// <summary>
/// 按值进行选择
/// </summary>
/// <param name="value" type="String">
/// 要选择的值,此值将会与mainValue属性所对应的节点进行对比
/// </param>
},
_select:function(index)
{
/// <summary>
/// 按索引进行选择,select方法不响应事件的副本
/// </summary>
/// <param name="index" type="Int">
/// 索引值
/// </param>
},
_selectByName:function(name)
{
/// <summary>
/// 按文本进行选择,selectByName方法不响应事件的副本
/// </summary>
/// <param name="name" type="String">
/// 要选择的文本,此值将会与mainText属性所对应的节点进行对比
/// </param>
},
_selectByValue:function(value)
{
/// <summary>
/// 按值进行选择,selectByValue方法不响应事件的副本
/// </summary>
/// <param name="value" type="String">
/// 要选择的值,此值将会与mainValue属性所对应的节点进行对比
/// </param>
}
}