Web版 ComboBox 之(1) Javascript文件(ComboBox.js)

/****************************************************************************************************************

创建人 ： 郑紫至

创建日期： 2009-9-9

E-mail ： zhengzizhi@yahoo.com.cn

Blog ： http://hi.csdn.net/zhengzizhi

功能描述： 单击网页任何地方都会隐藏下拉列表，单击InputContainer标签对象即div标签区域内任何区域都会显示下拉列表

参数说明： cmbXXList 容纳列表数据table所在的容器标签div对象cmbXXList ，两个大写XX表示“某某 ”泛指名称

调用方式： <div class="InputContainer" onclick="ComboBoxShow(document.getElementById('cmbNameList'))") >

内部是一个一行两列的table 左边是TextBox 右边是下拉前头图片

</div>

备注说明： ComboBoxShow函数一个显据特点 点击一个div标签 去控制另外一个div标签的显示

*****************************************************************************************************************/

////////////////////////////////////// 单击交替显或示隐藏下拉列表 BEGIN /////////////////////////////////////////

var DivId

var IsShow = false//下拉列表显示状态标识

function ComboBoxShow(cmbXXList) {//单击InputContainer标签对象即div标签区域内任何区域都会显示下拉列表

DivId = cmbXXList;

if (DivId != null) {

if (DivId.style.display == 'block') {

DivId.style.display = 'none';

}

else {//css 文件中将DivId.style.display初始状态设置为none即隐藏状态 第一次单击InputContainer标签区域会运行else条件部分

DivId.style.display = 'block';

}

}

}

function ComboBoxHide() {

if (IsShow) {

if (DivId != null) {

if (DivId.style.display == 'block')

DivId.style.display = 'none'; //隐藏

}

}

IsShow = !IsShow;

}

document.onclick = ComboBoxHide//单击网页任何地方都会隐藏下拉列表

////////////////////////////////////// 单击交替显或示隐藏下拉列表 END ///////////////////////////////////////////

/****************************************************************************************************************

*****************************************************************************************************************/

////////////////////////////////////// GetSelectedMouseoverItem BEGIN ////////////////////////////////////////////////////

function GetSelectedMouseoverItem(tableObject, txtInput) {

//debugger;//从设置debugger的位置开始调试javascript代码

var HtmlForm = this; //this关键字指示的对象是浏览器的window对象

HtmlForm.ExtraAddedTableObject = tableObject; //扩展一个table对象在window对象中，并设置扩展对象的的值为tableObject

HtmlForm.ExtraAddedCurrentSelectedRow = null;//扩展一个当前被选择行对象

HtmlForm.ExtraAddedTableObject.onmouseover = function(eventTag) {

if (eventTag == null) eventTag = window.event;

var e = eventTag.srcElement || eventTag.target;

if (e == this) { return; }

while (typeof (e) == "undefined" || e.tagName != "TR") {

e = e.parentElement || e.parentNode;

}

//debugger;//从设置debugger的位置开始调试javascript代码

HtmlForm.ExtraAddedCurrentSelectedRow = e; //获得当前选择行TR对象

var cells = HtmlForm.ExtraAddedCurrentSelectedRow.cells; //获得当前选择行TR内的所有TD对象

cells[0].style.backgroundColor = "#0033FF"; //TD背景色,一行只有一个TD标签

cells[0].style.color = "#FFFFFF"; //TD内文字的颜色

}

HtmlForm.ExtraAddedTableObject.onmouseout = function(eventTag) {

if (eventTag == null) eventTag = window.event;

var e = eventTag.srcElement || eventTag.target;

if (e == this) { return; }

while (typeof (e) == "undefined" || e.tagName != "TR") {

e = e.parentElement || e.parentNode;

}

if (HtmlForm.ExtraAddedCurrentSelectedRow == null) { return; }

//debugger;//从设置debugger的位置开始调试javascript代码

var cells = HtmlForm.ExtraAddedCurrentSelectedRow.cells;

cells[0].style.backgroundColor = "#F5F5F5";

cells[0].style.color = "#000000";

HtmlForm.ExtraAddedCurrentSelectedRow = null

}

HtmlForm.ExtraAddedTableObject.onclick = function(eventTag) {

if (eventTag == null) eventTag = window.event;

var e = eventTag.srcElement || eventTag.target;

if (e == this) { return; }

while (typeof (e) == "undefined" || e.tagName != "TR") {

e = e.parentElement || e.parentNode;

}

HtmlForm.ExtraAddedCurrentSelectedRow = e;

var cells = HtmlForm.ExtraAddedCurrentSelectedRow.cells;

for (var i = 0; i < cells.length; i++) {

txtInput.value = cells[i].innerHTML;

}

}

}

////////////////////////////////////// GetSelectedMouseoverItem END ////////////////////////////////////////////////////////

/****************************************************************************************************************

创建人 ： 郑紫至

创建日期： 2009-9-9

功能描述： 在文本框内输入内容会自动过滤出以输入内容(不区分大小写)开头的下拉列表项集合

参数说明： tableObject 表格标签对象

txtInput 文本输入框对象

调用方式： <input name="ctl00$ContentPlaceHolder1$cmbName" type="text" id="ctl00_ContentPlaceHolder1_cmbName"

onkeyup="filterListItems(document.getElementById('cmbNameTable'),

document.getElementById('ctl00_ContentPlaceHolder1_cmbName'))" />

备注描述： 在ASP.NET中因为创建的.aspx页面文件使用了母板，所以原来的TextBox文本框在运行后ID值cmbName

被系统自动加上一个 “ctl00_ContentPlaceHolder1_”前缀，只有向上面那样写ID的值，在浏览器内才可以

找到TextBox这个标签对象input。

*****************************************************************************************************************/

////////////////////////////////////// filterListItems BEGIN ////////////////////////////////////////////////////

function filterListItems(tableObject, txtInput) {

var txt = txtInput.value.toUpperCase();

var txtLen = txt.length;

var trObject = tableObject.rows;//获得表格所有的TR行对象

var rowsCount = trObject.length;

var firstItem = 0;//设置列表项第一行TR背景色用到的标志

if (txt.toString() != "") {//文本框被清空后执行的部分

for (var i = 0; i < rowsCount; i++) {

//当每输入一个字符后，整个文本框的内容与列表项被截取相等长度不同时执行的部分

if (trObject[i].cells[0].innerHTML.substr(0, txtLen).toUpperCase() != txt.toString()) {

trObject[i].style.display = "none";//隐藏TR行

trObject[i].style.backgroundColor = "#F5F5F5"; //设置TR行背景色为"#F5F5F5"

}

//当每输入一个字符后，整个文本框的内容与列表项被截取相等长度相同时执行的部分

if (trObject[i].cells[0].innerHTML.substr(0, txtLen).toUpperCase() == txt.toString()) {

trObject[i].style.display = "block"; //显示TR行

if (firstItem == 0) {//过滤后第一行显示的颜色

trObject[i].style.backgroundColor = "#0033FF"; //设置TR行背景色为"#0033FF"

firstItem = -1;

}

}

}

}

else {//文本框每输入一个新字符后执行的部分

for (var i = 0; i < rowsCount; i++) {

trObject[i].style.display = "block";//显示TR行

trObject[i].style.backgroundColor = "#F5F5F5"; //设置TR行背景色为"#F5F5F5"

}

}

}

////////////////////////////////////// filterListItems END //////////////////////////////////////////////////////