用HTC来实现列表提示框[1]

演示

定义
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.onchange=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[i] = temp[i].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[i].indexof(input)==0)
  {
         oselect.add(new option(list[i],list[i]));
  }
 }
 /*
 for(var i=0;i<list.length;i++)
 {