怎么实现google的下拉列表效果

snowvan 2007-12-20 11:25:32

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

...全文

614 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

wyl918 2007-12-22

打赏
举报

9楼的，你的应该会被下拉列表遮挡住吧，如果楼主需要的话可以联系我，不过要记得给分吆(497676936我的QQ)

wyl918 2007-12-22

打赏
举报

9楼的，你的方法会被下拉列表遮挡住吧，楼主来了的话，可以联系一下我，我这有类似的源码

lovehongyun 2007-12-20

打赏
举报

up.

一品梅 2007-12-20

打赏
举报

紧随着text下面的元素设为DIV.顶多再得用CSS，控制外观.

div.prompt {

...

}

<div id="prompt"> 

    <table>

    <tr>

    <td>item</td>



    ...

    </tr>

    </table>

<div>

一品梅 2007-12-20

打赏
举报

<div> 

    <font>item</font>

    ...



<div>

Animatrix 2007-12-20

打赏
举报

有代码么？

snowvan 2007-12-20

打赏
举报

继续顶！

lovehongyun 2007-12-20

打赏
举报

帮顶.

gimse7en 2007-12-20

打赏
举报

学习

大正他爹 2007-12-20

打赏
举报

用一层显示，为了这个层不被select标签遮住，要在一个iframe上加这个层，其它LZ可以想到。

一品梅 2007-12-20

打赏
举报

错了,是OnStateChanging.

dh2087 2007-12-20

打赏
举报

自己写js,循环返回数据生成DIV嵌套

yuelailiu 2007-12-20

打赏
举报

DIV嵌套

fcuandy 2007-12-20

打赏
举报

是一个事件.
就像onload, onclick之类的一个类型.
onpropertychange指的是当对象的属性变更时触发.

关于摸拟google下拉的.
http://topic.csdn.net/u/20071122/20/1bdfceb3-97e2-4236-90fd-4e8f49223f43.html

palm_java 2007-12-20

打赏
举报

onpropertychange 是什么

西安风影 2007-12-20

打赏
举报

实现浮动效果要把你的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>