怎么实现google的下拉列表效果
我已经实现在<input id="eee" type="text" /> 文本改变调用Ajax返回值 但是得到的数据怎么填充一个像google那样的浮动在页面上而且显示在这个文本框下的效果？
[解决办法]
用一层显示，为了这个层不被select标签遮住，要在一个iframe上加这个层，其它LZ可以想到。
[解决办法]
帮顶.
[解决办法]
- C# code
<div> <font>item</font> ...<div>
[解决办法]
紧随着text下面的元素设为DIV.顶多再得用CSS，控制外观.
- CSS code
div.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>
<input type="text" id="text1" onpropertychange="textChange(this.value);" />
<br>
<div id="div1" style="border:1px solid #8877EE;display:none;position:absolute;width:146;background-color:#EEFFFF">
</div>
</body>
</html>
注:position:absolute实现div浮动且显示时不占位
data.xml文件:
<?xml version="1.0" encoding="GB2312"?>
<root>
<d>d1</d>
<dd>dd1-dd2</dd>
<ddd>ddd1-ddd2-ddd3</ddd>
<dddd>dddd1-dddd2-dddd3-dddd4</dddd>
<ddddd>ddddd1-ddddd2-ddddd3-ddddd4-ddddd5</ddddd>
</root>
[解决办法]
是一个事件.
就像onload, onclick之类的一个类型.
onpropertychange指的是当对象的属性变更时触发.
关于摸拟google下拉的.
http://topic.csdn.net/u/20071122/20/1bdfceb3-97e2-4236-90fd-4e8f49223f43.html