用HTC来实现列表提示框

relaxlife.net收藏：用HTC来实现列表提示框   [ 日期：2005-05-16 ]   [ 来自： ] [作者：cexo255]

用HTC来实现列表提示框 [日期：2004-12-11] 来源：csdn  作者： [字体：大 中 小]   演示 定义 tipSrc          数据源 (XML文件)  tipLen          列表框长度 (数字) inputCase    大小写 ("upper"或者"lower") 示例 <input type="text" name="textfield" style="behavior:url('htc/tip.htc')" tipSrc="vslnm.php" tipLen="15" inputCase="upper"> HTC文件 <!-- --------------------------------------------------------------------- // //  File:  tip.htc //  version:    1.0 //  Description:下拉列表提示. //  author:     伍维波 // //------------------------------------------------------------------------> <PUBLIC:COMPONENT id="tip" urn="wwb:tip">  <PUBLIC:PROPERTY name="tipSrc" />                             //数据源，XML文件 <PUBLIC:PROPERTY name="tipLen" />                             //列表框长度  <PUBLIC:PROPERTY name="inputCase" />                        //大小写 <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="init()" />   <PUBLIC:ATTACH EVENT="onkeydown" ONEVENT="enterTip()" /> <PUBLIC:ATTACH EVENT="onkeyup" ONEVENT="showTip()" /> <script language="JavaScript"> var list=new Array(); //数据列表 var oInput;           //目标对象 var oSelect;          //列表框对象 var oDiv;             //定位对象 /***初始化***/ function init() {  loadData();    //alert(element.name);  ele=element;  oInput=ele;  oDiv=document.createElement("DIV");  var top = ele.offsetTop;     var left = ele.offsetLeft;     var width = ele.offsetWidth;     var height = ele.offsetHeight;     while(ele = ele.offsetParent)     {        top  += ele.offsetTop;        left += ele.offsetLeft;     }  top = top + height;  oDiv.style.position="absolute";  //alert(left+"="+top);  oDiv.style.left=left;  oDiv.style.top=top;  oDiv.style.visibility="hidden";  //alert(left);  //alert(top);  oSelect=document.createElement("SELECT");  if(tipSrc!=null&&tipSrc!="")  {     oSelect.size=tipLen;  }  else  {    oSelect.size=10;  }  oSelect.οnchange=function()  {   oInput.value=this.value;  }  oSelect.attachEvent("onkeydown",changeTip);  oSelect.attachEvent("onclick",selectTip);  oInput.insertAdjacentElement( "AfterEnd", oDiv);  oDiv.insertAdjacentElement("AfterBegin",oSelect);   return true; } /***装载数据***/ function loadData() {  if(tipSrc!=null&&tipSrc!="")  {   var xmldom = new ActiveXObject('Microsoft.XMLDOM');   xmldom.async = false;   //alert(tipSrc);   xmldom.load(tipSrc);   root = xmldom.documentElement;   temp=root.selectNodes("//OPTION");   for(var i=0;i<temp.length;i++)   {    list = temp.text;   }   return true;  }  else   return false; } /***显示列表提示框***/ function showTip() {  //alert("KEYUP");  event.cancelBubble=true;  ele=event.srcElement;  if(inputCase!=null&&inputCase=="upper")   oInput.value = oInput.value.toUpperCase();  else if(inputCase!=null&&inputCase=="lower")   oInput.value = oInput.value.toLowerCase();    input=ele.value;  if(input==oSelect.value)  {   hideTip();   return true;  }  clear();    for(i=0;i<list.length;i++)  {       if(list.indexOf(input)==0)    {          oSelect.add(new Option(list,list));   }  }  /*  for(var i=0;i<list.length;i++)  {   var oOption=document.createElement("OPTION");   oOption.text = list;   oSelect.options.add(oOption);  }  */  //ele.insertAdjacentElement( "AfterEnd", oDiv);  //oDiv.insertAdjacentElement("AfterBegin",oSelect);  oDiv.style.visibility="visible";  oSelect.selectedIndex=0;  return true; } /***按键操作***/ function enterTip() {  //alert("KEYDOWN");  //alert(oInput);  kc=event.keyCode;     if(oDiv.style.visibility!="hidden")  {      if(kc==13)    {    selectTip();      }   else if(kc==40)    {       oSelect.focus();      }  } } /***改变列表项***/ function changeTip() {  kc=event.keyCode;     if(oDiv.style.visibility!="hidden")  {      if(kc==13)    {    selectTip();      }   if(kc==40)    {       oInput.value=oSelect.value;      }  } } /***选择列表项***/ function selectTip() {     oInput.value=oSelect.value;  oInput.focus();  hideTip(); } /***隐藏列表提示框***/ function hideTip() {  oDiv.style.visibility = "hidden"; } /***删除列表项***/ function clear() {  for(var i=oSelect.options.length-1;i>=0;i--)  {   oSelect.options.remove(i)  } } </script> </PUBLIC:COMPONENT>  数据源 XML文件的格式如下 <?xml version="1.0" encoding="GB2312"?> <LIST>   <OPTION>208</OPTION>   <OPTION>207</OPTION>   <OPTION>206</OPTION>   <OPTION>205</OPTION>   <OPTION>204</OPTION>   <OPTION>203</OPTION>   <OPTION>202</OPTION>   <OPTION>201</OPTION>   <OPTION>200</OPTION>   <OPTION>199</OPTION> </LIST> 也可以用PHP来生成XML的示例 <?php  header("Content-type: text/xml");  echo '<?xml version="1.0" encoding="GB2312"?>'; require_once("../lib/quotation.php"); $Quotation=new Quotation(); $Str=$Quotation->createVslNm(); echo $Str; ?>