用HTC来实现列表提示框

最新推荐文章于 2025-12-18 23:20:37 发布

转载最新推荐文章于 2025-12-18 23:20:37 发布 · 992 阅读

文章标签：

#htc #list #encoding #input #xml #javascript

HTML/CSS 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用HTC技术创建列表提示框，包括通过XML文件加载数据、响应键盘事件及调整输入框大小写等特性。

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文件

<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 = 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;
?>