如何实现google的下拉列表效果-ASP.NET教程-爱易网页

如何实现google的下拉列表效果

日期：2014-05-18　浏览次数：20448 次

怎么实现google的下拉列表效果
我已经实现在<input id="eee" type="text" /> 文本改变调用Ajax返回值但是得到的数据怎么填充一个像google那样的浮动在页面上而且显示在这个文本框下的效果？

------解决方案--------------------
用一层显示，为了这个层不被select标签遮住，要在一个iframe上加这个层，其它LZ可以想到。
------解决方案--------------------
帮顶.
------解决方案--------------------

C# code

<div> 
    <font>item</font>
    ...

<div>

------解决方案--------------------
紧随着text下面的元素设为DIV.顶多再得用CSS，控制外观.
CSS codediv.prompt {
...
}

------解决方案--------------------
up.

------解决方案--------------------
实现浮动效果要把你的div设置成position:absolute
以下是全部代码，测试过的
Index.html文件:
<html>
<head>
<script>
var xmlHttp;
function createXMLHttpRequest()
{
   if(window.ActiveXObject)
   {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if(window.XMLHttpRequest)
   {
       xmlHttp = new XMLHttpRequest();
   }
}
function startRequest(data)
{
   createXMLHttpRequest();
   try
   {
       xmlHttp.onreadystatechange = function(){handleStateChange(data);}
       xmlHttp.open("GET", "data.xml", true);
       xmlHttp.send(null);	
   }
   catch(exception)
   {
       alert("xmlHttp Fail");
   }
}
function handleStateChange(data)
{	
   if(xmlHttp.readyState == 4)
   {		
       if (xmlHttp.status == 200 || xmlHttp.status == 0)
       {
           var root = xmlHttp.responseXML.documentElement;			
           try
           {
               var info = root.getElementsByTagName(data)[0];
               var text = info.firstChild.nodeValue;
               var array = text.split("-");
               var obj = document.getElementById("div1");
               obj.style.display = "block";
               obj.innerHTML = "";
               for(var i=0; i<array.length; i++)
               {
                   obj.innerHTML = obj.innerHTML + "<span style='display:block' onclick='spanClick()' onmouseover='spanMouseOver()'>" + array[i] + "</span>";
               }
           }
           catch(exception)
           {
               var obj = document.getElementById("div1");
               obj.style.display = "block";
               obj.innerHTML = "";
           }
       }
   }
}
function textChange(data)
{
   if(data == "")
   {
       var obj = document.getElementById("div1");
       obj.style.display = "block";
       obj.innerHTML = "";
   }
   else
   {
        startRequest(data);
   }
}
function spanClick()
{
   var spanObj=event.srcElement;
   var textObj = document.getElementById("text1");
   textObj.value = spanObj.innerHTML;
   var divObj = document.getElementById("div1");
   divObj.style.display = "none";
   divObj.innerHTML = "";
}
var oldSpanObj;
function spanMouseOver()
{
   if(oldSpanObj != null)
   {
       oldSpanObj.style.backgroundColor = "#FFFFFF";
   }
   var spanObj=event.srcElement;
   spanObj.style.backgroundColor = "#FF7788";
   oldSpanObj = spanObj;
}
</script>
</head>
<body>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

如何实现google的下拉列表效果

相关资料更多>

推荐阅读更多>