关闭

用HTC来实现列表提示框

标签: htclistencodinginputxmljavascript
549人阅读 评论(0) 收藏 举报
分类:
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.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;
?>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:25576次
    • 积分:9
    • 等级:
    • 排名:千里之外
    • 原创:0篇
    • 转载:29篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档