javascript xml は、データ ソース_javascript スキルのドロップダウン ボックス コントロールです。

たとえば、入力ボックスに Zhang San、Changsha、または Hunan と入力すると、Zhang San が表示され、「18」と入力すると、Zhang San と Li Si が同時に表示されます。テスト データ ソースは次のとおりです。 :

コードをコピー コードは次のとおりです:

s1
Zhang San

市>
学生>
;
s2
李思
武漢都市> ;

学生>
s3
;/名前>

>
//------------------------------------------ DropDownListx.js----------
function DropDownListx(parent,id)
{
this.id = id; var i;
var me = this;
var e = this.parent;
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.parent.offsetWidth;
this.height = 150;
this.visibility = "hidden";//data属性として表現されますが、node
this.mainText = "";//表示するフィールドの名前
this.mainValue = "";//のフィールドの名前でも表現できます。返される値
this.selectedIndex = -1;//選択されたインデックス
this.mouseoverIndex = -1;//マウスホバー時のインデックス
this.mouseoutIndex = -1;//マウスが離れるときのインデックス
this.selectedValue = "";
this.value = "";
this.text = ""; .drawed = false; // 再描画されたかどうかを意味します。
this.table = null; (i = 6;i>0; i--)
{
try
{
this.dataSource = new ActiveXObject("MSXML2.DOMDocument." i ".0"); >break;
}
catch(ex1){;};
catch(ex2){;}; >this.dataSource.setProperty(" SelectionLanguage ", "XPath");
var sh = function(){if(me.visibility == "hidden")me.show();}; 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.onmouseout = 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.parent.offsetHeight)
{
if (me.visibility == "visible " )
me.hide();
}
});
}
//親の位置が変わる可能性があるため、位置を再取得します
DropDownListx.prototype.getPosition=function ( )
{
var e = this.parent;
var x = e.offsetLeft; 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"); .position = "絶対";
d.style.borderLeft = "黒の 1px 溝";
d.style.borderTop = "黒の 1px 溝"; "黒の 1 ピクセルの溝";
document.body.appendChild(d);
d.style.borderBottom = "黒の 1 ピクセルの溝"; d.style.backgroundColor = "白";
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";
this.visibility = "visible"; listData();
this ._selectByName(this.parent.value);
DropDownListx.prototype.listData=function()
{
var e = this.parent; >varbase = this;
//データを表示します
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 "";
str = "

" テキスト "

";
var div = document.getElementById(this.id "_div_" e.id);
div.innerHTML = str;
var table = document.getElementById(this.id "_table_" e.id);
this.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 = "";
}
base.selectedIndex = events.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); >if(base.onSelected != null)
base.onSelected.apply(base);
return
};
d.onmouseover=function()
{
base.mouseoverIndex =parseInt(event.srcElement.id.split("_td_")[1].split("_")[0]);
試してください
{
event.srcElement.style.backgroundColor='gray';
event.srcElement.style.color='white';
e.value =event.srcElement.innerText;
if(base.onmouseover != null)
base.onmouseover.apply(base);
}
キャッチ(例){};
};
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 = "非表示";
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 ノード = 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>{
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.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;

{
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 = "青";
this.parent.focus();
}catch(ex){}
if(this.onSelected != null)
this.onSelected.apply(this);
}
}
DropDownListx.prototype.selectByName=function(name)
{
if(name == null || name == "")
{
this .reset();
戻る;
}
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) ブレーク;
}
if(i != this.nodeList.length)
{
this.select(i);
}
else
this.reset();
}
DropDownListx.prototype.selectByValue=function(value)//不響大会のサブ本
{
if(value == null || value == "")
{
this.reset();
戻る;
}
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) ブレーク;
}
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;

{
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 = "青";
this.parent.focus();
}catch(ex){}
}
}
DropDownListx.prototype._selectByName=function(name)//不響雄イベントの副本
{
if(name == null || 名前 == "")
{
this.reset();
戻る;
}
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) ブレーク;
}
if(i != this.nodeList.length)
{
this._select(i);
}
else
this.reset();
}
DropDownListx.prototype._selectByValue=function(value)//不響雄イベントのサブ本
{
if(value == null || value == "")
{
this.reset();
戻る;
}
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) ブレーク;
}
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
///
}
}