惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

量子位
云风的 BLOG
云风的 BLOG
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
The Hacker News
The Hacker News
Martin Fowler
Martin Fowler
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
U
Unit 42
F
Full Disclosure
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Recorded Future
Recorded Future
Security Archives - TechRepublic
Security Archives - TechRepublic
阮一峰的网络日志
阮一峰的网络日志
T
Threatpost
P
Privacy International News Feed
GbyAI
GbyAI
Stack Overflow Blog
Stack Overflow Blog
MongoDB | Blog
MongoDB | Blog
I
Intezer
Recent Announcements
Recent Announcements
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
P
Privacy & Cybersecurity Law Blog
A
Arctic Wolf
博客园 - 聂微东
博客园 - 叶小钗
Cisco Talos Blog
Cisco Talos Blog
H
Help Net Security
S
Schneier on Security
Y
Y Combinator Blog
D
Darknet – Hacking Tools, Hacker News & Cyber Security
T
The Exploit Database - CXSecurity.com
T
Tor Project blog
月光博客
月光博客
NISL@THU
NISL@THU
A
About on SuperTechFans
Spread Privacy
Spread Privacy
Blog — PlanetScale
Blog — PlanetScale
D
DataBreaches.Net
雷峰网
雷峰网
C
CXSECURITY Database RSS Feed - CXSecurity.com
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园 - 【当耐特】
G
Google Developers Blog
W
WeLiveSecurity
P
Palo Alto Networks Blog
The Last Watchdog
The Last Watchdog
K
Kaspersky official blog
博客园 - 司徒正美
L
LINUX DO - 热门话题
小众软件
小众软件

博客园 - RedSoft

需求分析——你好,我好,大家好! PHP问题列表(持续更新) [收藏]mysql 性能的检查和调优方法 【收藏】hibernate 集合映射inverse和cascade详解 个人网站开通。 【原】轻量级的数据交换格式——初识Json(下) 【原】轻量级的数据交换格式——初识Json(上) 【原】初学Jquery 【原】初学Flex之简单图片查看器 【原】基于asp.net的Web开发架构探索 JavaScript使用技巧精萃 WinForm UI设计与开发思路(转) C#编程风格约定 C#常用正则表达式 将目录下的图片文件写成一个二进制大文件 写了个MVC/多层的Demo…… EnableViewState,与TextBOx控件状态改变的关系 软件史上最伟大的十大程序员(图文) sql 常用语句积累
文本框+层模拟下拉框,并实现输入自动提示和过滤
RedSoft · 2007-11-22 · via 博客园 - RedSoft

采用xml,xsl,js,xmldom编写.兼容ie和firefox浏览器.

效果如以下网址:

http://www.vcsale.com/cheap.Final_Fantasy_XI.3.aspx

1.首先,一个简单的js类.

function inputSelection()
{
    
/*fcuandy 2007-11-22*/    

    
var txtObj      = null;  //输入框 input text
    var selObj      = null;  //模拟下拉列表的层 the div which used for option items container
    var xd          = null;  //数据据源. xmldom对象 xmldom data source
    var pstIdObj    = null;  //下拉后,将id也即option.value存放的位置 
    var pstNameObj  = null;  //下拉后,将name也即option.outertext存放的位置.这两个主要用于表单提交的参数,可用input type=hidden
    var selXPath    = null;  //针对xmldom进行查询的路径 xpath string
    var selAttributeName = null;  //输入框中的值与哪个属性值,或节点值进行匹配比较  compare attribute name
    var callMethod = null//点击模拟下拉列表层中的某个项后,数据进行了处理之后,是否再调用其它页面js方法. 可为空
    var idIndex = 0;  //设置,pstIdObj的值取node的第0个属性 
    var txtIndex = 1//设置,pstNameObj的值取node的第1个属性


    
//清空select div
    this.clearSEL=function()
    
{
        
this.selObj.innerHTML = "";
        
this.pstIdObj.value = "";
        
this.pstNameObj.value = "";
    }



    
//根跟用户输入值重建select div 里的选项
    this.reBuildSEL=function()
    
{
   
        
var s = this.txtObj.value.toLowerCase();
        
var outHTML = "";

        
if(ie4)
        
{this.xd.setProperty("SelectionLanguage","XPath");}
    
    
        
//text input .value is null, then list all servers
        if(s.length==0)
        
{
            
var root=this.xd.selectNodes(this.selXPath);

        }

        
else
        
{
            
var root=this.xd.selectNodes(this.selXPath + "[starts-with(translate(@" + this.selAttributeName + ",'abcdefghijklmnopqrstuvwxyz','ABCDEFGHIJKLMNOPQRSTUVWXYZ'),'" + s.toUpperCase()  + "')]");

        }

        
        
//no server available,then list all servers
        /*if(root.length==0)
        {
            root=this.xd.selectNodes("//server");
            var root=this.xd.selectNodes(this.selXPath);
        }
*/


        
if(ie4)
        
{
            
for(var i=0;i<root.length;i++)
            
{
                
                outHTML 
+= "<a href='#'><div style='cursor:hand;width:182;text-decoration:none;color:#333;' onmouseover='this.style.backgroundColor="#98CDCD"' onmouseout='this.style.backgroundColor=""' id="li_" + root(i).attributes(this.idIndex).value + "" onclick='javascript:document.getElementById("" + this.txtObj.id + "").value=this.innerText;document.getElementById("" + this.pstIdObj.id + "").value=this.id.substring(this.id.indexOf("_")+1,this.id.length);document.getElementById("" + this.pstNameObj.id + "").value=this.innerText;document.getElementById("" + this.selObj.id + "").style.display="none";" + (this.callMethod == null ? "" : this.callMethod + ";"+ "'>" + root(i).attributes(1).value + "</div></a>";
            }

        }

        
else
        
{
            
for(var i=0;i<root.length;i++)
            
{
                
                outHTML 
+= "<a href='javascript:void(0)'><div style='height:20px;width:182px;text-decoration:none;color:#333;' onmouseover='this.style.backgroundColor="#98CDCD"' onmouseout='this.style.backgroundColor=""' id="li_" + root[i].attributes[this.idIndex].value + "" onclick='document.getElementById("" + this.txtObj.id + "").value=this.textContent;document.getElementById("" + this.pstIdObj.id + "").value=this.id.substring(this.id.indexOf("_")+1,this.id.length);document.getElementById("" + this.pstNameObj.id + "").value=this.textContent;document.getElementById("" + this.selObj.id + "").style.display="none";" + (this.callMethod == null ? "" : this.callMethod + ";"+ "'>" + root[i].attributes[this.txtIndex].value + "</div></a>";
                
            }

        }

        
//alert(this.callMethod);
        if(outHTML == "")
        
{
            outHTML 
= "<br/>";
        }

        i
= i==0 ? 1 : i;
        
this.selObj.innerHTML = outHTML;
    
    
//当对outHTML中写的onclick事件中的代码有一些特列操作时,比如创建新对象,或是给创建新事件等等,总之创建新的html element的话,采用inserAdjacentHTML方法替换innerHTML.
        //this.selObj.insertAdjacentHTML("afterBegin",outHTML);
        this.selObj.style.position="absolute";
        
this.selObj.style.height = 20 * i > 200 ? 200 : 20 * i;
        
this.selObj.style.display = "";
    }

    

}

 调用说明:

a.首先您可以先通过服务器端脚本输出获得xmldocument供 inputSelection使用.

比如使用asp.net,asp,或php

也可以使用xmlhttp或xmldom直接获取数据提供页输出的xml(或字串并自己转换为xml)

本来这步操作,我可以加在 inputSelection 类里的,但是我的页面是由服务器在xslt输出html时生成的xml串,所以将获提xmldomcumnet的过程分离出来了.

          var ns4 = (document.layers) ? true : false;
          
var ie4 = (document.all) ? true : false;
          
var ServerStr="<xsl:text disable-output-escaping="yes"><![CDATA[<]]></xsl:text>root<xsl:text disable-output-escaping="yes"><![CDATA[>]]></xsl:text>";
          
<xsl:for-each select="//CurrentGame/Server">
        ServerStr 
+= "<xsl:text disable-output-escaping="yes"><![CDATA[<]]></xsl:text>Server id="<xsl:value-of select="./@ServerID"/>" name="<xsl:value-of select="./@Name"/>" /<xsl:text disable-output-escaping="yes"><![CDATA[>]]></xsl:text>";
          
</xsl:for-each>
          ServerStr 
+= "<xsl:text disable-output-escaping="yes"><![CDATA[<]]></xsl:text>/root<xsl:text disable-output-escaping="yes"><![CDATA[>]]></xsl:text>";


          
if(ie4)
          
{
         
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
              xmlDoc.async 
= false;
          xmlDoc.loadXML(ServerStr);

          }

          
else
          
{



              Node.prototype.selectNodes
=function(xPath)
          
{
              
var xresult=this.evaluate(xPath,this,null,XPathResult.ORDERED_NODE_ITERATOR_TYPE,null);
              
var nod=null,nods=[],k=0;
              
while((nod=xresult.iterateNext())!=null)
                  
{
                      nods[k
++]=nod;
                  }

                  
return nods;
              }


          XMLDocument.prototype.loadXML 
= function(xmlString)
              
{
              
var childNodes = this.childNodes;
              
for (var i = childNodes.length - 1; i <xsl:text disable-output-escaping="yes"><![CDATA[>]]></xsl:text>= 0; i--)
                  
this.removeChild(childNodes[i]);

                  
var dp = new DOMParser();
                  
var newDOM = dp.parseFromString(xmlString, "text/xml");
                  
var newElt = this.importNode(newDOM.documentElement, true);
                  
this.appendChild(newElt);
              }
;

          
var xmlDoc=document.implementation.createDocument('','',null);
              xmlDoc.async
=0;

          xmlDoc.loadXML(ServerStr);

          }

b,接下来,页面上按位置摆放您的html element.

c. 在上一步看到, input onkeyup时触发了removeAll方法. 实际是清除模拟select option的div.并且重新动态加载.

这与ajax有区别, 因为所需数据在页面加载时已全加载到string里,或者说又加载到了xmldom里.不需要再次到服务器端请求.

在removeAll方法里, 实例化 inputSelection,并进行初始化和进行清除及option item重建.

d,最后一步,当页面点击其它位置时,隐藏div

 <body onclick="hideSelection(event)">

          function hideSelection(e)
          {
          var objx=document.getElementById("divContainer");
          var cobj=document.getElementById("tFirstC");
         
          var eobj= e.srcElement ? e.srcElement : e.target;
          if(eobj.id != cobj.id)
              objx.style.display="none";
          }

这个东西到现在用起来,还不是很方便,即移植麻烦了一点,等有空时,我把xml数据获取的部分也一起写到inputSelection里.

欢迎进行改进.和提出bug.谢谢.