文本框+层模拟下拉框,并实现输入自动提示和过滤

约定不等于承诺〃 2021-12-24 08:31 279阅读 0赞

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

效果如以下网址:

[http://www.vcsale.com/cheap.Final\_Fantasy\_XI.3.aspx][http_www.vcsale.com_cheap.Final_Fantasy_XI.3.aspx]

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

![None.gif][] function  inputSelection()  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ... \{  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]/\*\*//\*fcuandy 2007-11-22\*/  
![InBlock.gif][]  
![InBlock.gif][]var txtObj =null; //输入框 input text  
![InBlock.gif][]var selObj =null; //模拟下拉列表的层 the div which used for option items container  
![InBlock.gif][]var xd =null; //数据据源. xmldom对象 xmldom data source  
![InBlock.gif][]var pstIdObj =null; //下拉后,将id也即option.value存放的位置   
![InBlock.gif][]var pstNameObj =null; //下拉后,将name也即option.outertext存放的位置.这两个主要用于表单提交的参数,可用input type=hidden  
![InBlock.gif][]var selXPath =null; //针对xmldom进行查询的路径 xpath string  
![InBlock.gif][]var selAttributeName =null; //输入框中的值与哪个属性值,或节点值进行匹配比较 compare attribute name  
![InBlock.gif][]var callMethod =null; //点击模拟下拉列表层中的某个项后,数据进行了处理之后,是否再调用其它页面js方法. 可为空  
![InBlock.gif][]var idIndex =0; //设置,pstIdObj的值取node的第0个属性   
![InBlock.gif][]var txtIndex =1; //设置,pstNameObj的值取node的第1个属性  
![InBlock.gif][]  
![InBlock.gif][]  
![InBlock.gif][]//清空select div  
![InBlock.gif][]this.clearSEL=function()  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]...\{  
![InBlock.gif][]this.selObj.innerHTML ="";  
![InBlock.gif][]this.pstIdObj.value ="";  
![InBlock.gif][]this.pstNameObj.value ="";  
![ExpandedSubBlockEnd.gif][] \}  
![InBlock.gif][]  
![InBlock.gif][]  
![InBlock.gif][]//根跟用户输入值重建select div 里的选项  
![InBlock.gif][]this.reBuildSEL=function()  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]...\{  
![InBlock.gif][]  
![InBlock.gif][]var s =this.txtObj.value.toLowerCase();  
![InBlock.gif][]var outHTML ="";  
![InBlock.gif][]  
![InBlock.gif][]if(ie4)  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]...\{ this.xd.setProperty("SelectionLanguage","XPath");\}  
![InBlock.gif][]  
![InBlock.gif][]  
![InBlock.gif][]//text input .value is null, then list all servers  
![InBlock.gif][]if(s.length==0)  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]...\{  
![InBlock.gif][]var root=this.xd.selectNodes(this.selXPath);  
![InBlock.gif][]  
![ExpandedSubBlockEnd.gif][] \}  
![InBlock.gif][]else  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]...\{  
![InBlock.gif][]var root=this.xd.selectNodes(this.selXPath \+"\[starts-with(translate(@"\+this.selAttributeName \+",'abcdefghijklmnopqrstuvwxyz','ABCDEFGHIJKLMNOPQRSTUVWXYZ'),'"\+ s.toUpperCase() \+"')\]");  
![InBlock.gif][]  
![ExpandedSubBlockEnd.gif][] \}  
![InBlock.gif][]  
![InBlock.gif][]//no server available,then list all servers  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]/\*\*//\*if(root.length==0)  
![InBlock.gif][] \{  
![InBlock.gif][] root=this.xd.selectNodes("//server");  
![InBlock.gif][] var root=this.xd.selectNodes(this.selXPath);  
![ExpandedSubBlockEnd.gif][] \}\*/  
![InBlock.gif][]  
![InBlock.gif][]if(ie4)  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]...\{  
![InBlock.gif][]for(var i=0;i<root.length;i\++)  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]...\{  
![InBlock.gif][]  
![InBlock.gif][] outHTML \+="<a href='\#'><div style='cursor:hand;width:182;text-decoration:none;color:\#333;' οnmοuseοver='this.style.backgroundColor="\#98CDCD"' οnmοuseοut='this.style.backgroundColor=""' id="li\_"\+ root(i).attributes(this.idIndex).value \+"" οnclick='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>";  
![ExpandedSubBlockEnd.gif][] \}  
![ExpandedSubBlockEnd.gif][] \}  
![InBlock.gif][]else  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]...\{  
![InBlock.gif][]for(var i=0;i<root.length;i\++)  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]...\{  
![InBlock.gif][]  
![InBlock.gif][] outHTML \+="<a href='javascript:void(0)'><div style='height:20px;width:182px;text-decoration:none;color:\#333;' οnmοuseοver='this.style.backgroundColor="\#98CDCD"' οnmοuseοut='this.style.backgroundColor=""' id="li\_"\+ root\[i\].attributes\[this.idIndex\].value \+"" οnclick='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>";  
![InBlock.gif][]  
![ExpandedSubBlockEnd.gif][] \}  
![ExpandedSubBlockEnd.gif][] \}  
![InBlock.gif][]//alert(this.callMethod);  
![InBlock.gif][]if(outHTML =="")  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]...\{  
![InBlock.gif][] outHTML ="<br/>";  
![ExpandedSubBlockEnd.gif][] \}  
![InBlock.gif][] i= i==0?1 : i;  
![InBlock.gif][]this.selObj.innerHTML = outHTML;  
![InBlock.gif][]  
![InBlock.gif][]//当对outHTML中写的onclick事件中的代码有一些特列操作时,比如创建新对象,或是给创建新事件等等,总之创建新的html element的话,采用inserAdjacentHTML方法替换innerHTML.  
![InBlock.gif][]//this.selObj.insertAdjacentHTML("afterBegin",outHTML);  
![InBlock.gif][]this.selObj.style.position="absolute";  
![InBlock.gif][]this.selObj.style.height =20\* i >200?200 : 20\* i;  
![InBlock.gif][]this.selObj.style.display ="";  
![ExpandedSubBlockEnd.gif][] \}  
![InBlock.gif][]  
![InBlock.gif][]  
![ExpandedBlockEnd.gif][]\}

调用说明:

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

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

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

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

![None.gif][]  var  ns4  =  (document.layers)  ?  true  :  false ;  
![None.gif][] var  ie4  =  (document.all)  ?  true  :  false ;  
![None.gif][] var  ServerStr = " <xsl:text disable-output-escaping= " yes " ><!\[CDATA\[<\]\]></xsl:text>root<xsl:text disable-output-escaping= " yes " ><!\[CDATA\[>\]\]></xsl:text> " ;  
![None.gif][] < xsl: for \- each select = " //CurrentGame/Server " >   
![None.gif][] 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> " ;  
![None.gif][] </ xsl: for \- each >   
![None.gif][] ServerStr  \+=  " <xsl:text disable-output-escaping= " yes " ><!\[CDATA\[<\]\]></xsl:text>/root<xsl:text disable-output-escaping= " yes " ><!\[CDATA\[>\]\]></xsl:text> " ;  
![None.gif][]  
![None.gif][]  
![None.gif][] if (ie4)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ... \{  
![InBlock.gif][]var xmlDoc =new ActiveXObject("Msxml2.DOMDocument");  
![InBlock.gif][] xmlDoc.async =false;  
![InBlock.gif][] xmlDoc.loadXML(ServerStr);  
![InBlock.gif][]  
![ExpandedBlockEnd.gif][] \}   
![None.gif][] else   
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ... \{  
![InBlock.gif][]  
![InBlock.gif][]  
![InBlock.gif][]  
![InBlock.gif][] Node.prototype.selectNodes=function(xPath)  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]...\{  
![InBlock.gif][]var xresult=this.evaluate(xPath,this,null,XPathResult.ORDERED\_NODE\_ITERATOR\_TYPE,null);  
![InBlock.gif][]var nod=null,nods=\[\],k=0;  
![InBlock.gif][]while((nod=xresult.iterateNext())!=null)  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]...\{  
![InBlock.gif][] nods\[k\++\]=nod;  
![ExpandedSubBlockEnd.gif][] \}  
![InBlock.gif][]return nods;  
![ExpandedSubBlockEnd.gif][] \}  
![InBlock.gif][]  
![InBlock.gif][] XMLDocument.prototype.loadXML =function(xmlString)  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]...\{  
![InBlock.gif][]var childNodes =this.childNodes;  
![InBlock.gif][]for (var i = childNodes.length \-1; i <xsl:text disable\-output\-escaping="yes"><!\[CDATA\[>\]\]></xsl:text>=0; i\--)  
![InBlock.gif][]this.removeChild(childNodes\[i\]);  
![InBlock.gif][]  
![InBlock.gif][]var dp =new DOMParser();  
![InBlock.gif][]var newDOM = dp.parseFromString(xmlString, "text/xml");  
![InBlock.gif][]var newElt =this.importNode(newDOM.documentElement, true);  
![InBlock.gif][]this.appendChild(newElt);  
![ExpandedSubBlockEnd.gif][] \};  
![InBlock.gif][]  
![InBlock.gif][]var xmlDoc=document.implementation.createDocument('','',null);  
![InBlock.gif][] xmlDoc.async=0;  
![InBlock.gif][]  
![InBlock.gif][] xmlDoc.loadXML(ServerStr);  
![InBlock.gif][]  
![ExpandedBlockEnd.gif][] \}

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

![None.gif][] < input  type ="hidden"  id ="ServerID"  value =""  onchange ="alert('tst');"  />   
![None.gif][] < input  type ="hidden"  id ="ServerName"  />   
![None.gif][] < div  class ="div2" >   
![None.gif][] < span  style =" margin:2px 0 0 15px" >   
![None.gif][] < table  border ="0"  width ="100%"  id ="tabContainer"  cellspacing ="0"  cellpadding ="0" >   
![None.gif][] < tr >   
![None.gif][] < td  rowspan ="2"  valign ="top" >   
![None.gif][] Select Your Server To Buy Final Fantasy XI &nbsp; Gil </ td >   
![None.gif][] < td  width ="200" >   
![None.gif][] < input  id ="tFirstC"  class ="inp2"  maxlength ="20"  style ="cursor:default;"  size ="20"  onclick ="removeAll()"  onkeyup ="removeAll()"  />   
![None.gif][] </ td >   
![None.gif][] </ tr >   
![None.gif][] < tr >   
![None.gif][] < td >   
![None.gif][] < div  id ="divContainer"  style ="overflow-x:hidden;overflow-y:auto;text-align:left;line-height:150%;width:180px;height:200px;font-weight:0;font-size: 12px;color:\#333333;margin: 0px;padding: 4px;z-index: 1; border-left:1px solid \#336699;border-bottom:1px solid \#336699;border-right:1px solid \#336699;border-top:1px solid \#336699;background-color: white;display:none;"  />   
![None.gif][] </ td >   
![None.gif][] </ tr >   
![None.gif][] </ table >   
![None.gif][] </ span >   
![None.gif][] </ div >

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

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

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

![None.gif][]  function  removeAll()  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] ... \{  
![InBlock.gif][]  
![InBlock.gif][]var sel =new inputSelection();  
![InBlock.gif][] sel.txtObj = document.getElementById("tFirstC");  
![InBlock.gif][] sel.selObj = document.getElementById("divContainer");  
![InBlock.gif][] sel.xd = xmlDoc;  
![InBlock.gif][] sel.selXPath ="//Server";  
![InBlock.gif][] sel.selAttributeName ="name";  
![InBlock.gif][]  
![InBlock.gif][] sel.pstIdObj = document.getElementById("ServerID");  
![InBlock.gif][] sel.pstNameObj = document.getElementById("ServerName");  
![InBlock.gif][]  
![InBlock.gif][] sel.idIndex =0;  
![InBlock.gif][] sel.txtIndex =1;  
![InBlock.gif][]  
![InBlock.gif][] sel.callMethod ="goURL()";  
![InBlock.gif][] sel.clearSEL();  
![InBlock.gif][] sel.reBuildSEL();  
![InBlock.gif][]  
![ExpandedBlockEnd.gif][] \}

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

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.谢谢.

转载于:https://www.cnblogs.com/liping19851014/archive/2007/11/22/969119.html

[http_www.vcsale.com_cheap.Final_Fantasy_XI.3.aspx]: http://www.vcsale.com/cheap.Final_Fantasy_XI.3.aspx
[None.gif]: /images/20211223/9ffca53ca52b4a4f9bcd80173a4ac1f9.png
[ExpandedBlockStart.gif]: http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif
[ContractedBlock.gif]: /images/20211223/c332ae4eb2d34bdfb2174e09e95f2226.png
[ExpandedSubBlockStart.gif]: http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif
[ContractedSubBlock.gif]: /images/20211223/b4af4465544a4af1b3ff3d14d950e4be.png
[InBlock.gif]: /images/20211223/775a711c8fc04b50a677b81804c6c2ce.png
[ExpandedSubBlockEnd.gif]: /images/20211223/38ec8f147bf847a6800faa2bfe39a46a.png
[ExpandedBlockEnd.gif]: /images/20211223/0c535cd132f04c3db1137644b7d79a63.png