演示
定义
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++)
{
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;
?>