用HTC来实现列表提示框

演示

定义
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;
  }
&nb

sp; 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++)
 {
  var oOption=document.createElement("OPTION");
  oOption.text = list[i];
  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;
?>

原文转自：http://www.ltesting.net