这个效果我思考如下：
(1)下拉框可能用<div>来做
(2)需要与服务器实时交互，因为下拉框中出现的内容从服务器端读取的（用到AJAX）
求助较为详细的代码，谢谢了
------解决方案--------------------
前几天才做了一个，http://www.vichy.com.cn/
- JScript code
$(".searchText").bind("keyup", function(){
if(later!=null) clearTimeout(later);
later = setTimeout(function(){
var keyword = $(".searchText").val();
if(keyword!=""){
$.get("/skin.aspx", {keywords: keyword}, function(data){
var resHtml = "";
if($(data).find("keyword").length > 0){
$(data).find("keyword").each(function(index){
resHtml += "<li onmouseover=\"rs_event.hover()\" onmouseout=\"\" onclick=\"rs_event.click('"+$(this).find("name").text()+"')\">"+$(this).find("name").text()+"</li>\n";
});
$(".search_complete").html("").append(resHtml).show();
if($(data).find("keyword").length>20){
$(".search_complete").css({height:'400px', overflowY:'auto'});
}else{
$(".search_complete").css({height:'auto'});
}
}else{
$(".search_complete").hide();
}
});
}else{
$(".search_complete").hide();
}
}, 800) ;
});
------解决方案--------------------
能获取数据的话，剩下的就是定义div的显示样式而已，用css，我感觉用jquery中的ajax还是挺好用的
------解决方案--------------------
其实网上有现成的js控件的.
我前不久也模仿的写过。
我去找找！
------解决方案--------------------
学习下 哈！
------解决方案--------------------
纯js写的
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Auto Complete</title>
<style type="text/css">
.hlight{background-color:Red}
.normal{backgroud-color:transparent;}
</style>
<script language="javascript" type="text/javascript" src="../../JS/jquery-1[1].3.2.min.js"></script>
<script>
function doit(evt)
{
evt = (evt) ? evt : ((window.event) ? window.event : "");
var key = evt.keyCode?evt.keyCode:evt.which;
if(key==38|key==40|key==13)return;
var wd = document.getElementById("wd").value;
if(wd.length==0)return;
$.ajax({
url:'../../Example/AutoComplete/Handler1.ashx',
type:'POST',
dataType:'json',
data: "wd="+wd,
error:function(x){alert(x.status);},
success:function(data){$("#show_wd").html(setTable(data)).show();}
});
}
//设置拼接Table
function setTable(jsn)
{
if(jsn.s.length==0|jsn.s[0]==""|jsn.s[0]=="undefined")
{
document.getElementById("show_wd").style.display="none";
return"";
}
var html ="<table id=\"tb\" width=\"100%\">";
for(var i in jsn.s)
{
html+="<tr onmouseover=\"hLight(this)\"><td onclick=\"completeField(this)\">"+jsn.s[i]+"</td></tr>";
}
html +="<tr class=\"hlight\" style=\"display:none\"><td>"+document.getElementById('wd').value+"</td></tr>";
//alert(document.getElementById('wd').value);
html +="</table>";
//setDiv();//设置DIV
//alert(html);
return html;
}
//设置DIV的位置
function setDiv()
{
var txt = document.getElementById("wd");
var tDiv = document.getElementById("show_wd");
tDiv.style.width =txt.offsetWidth; + "px";
var left = calculateOffset(txt,"offsetLeft");
var top = calculateOffset(txt, "offsetTop") + txt.offsetHeight;
tDiv.style.border = "black 1px solid";
tDiv.style.left = left + "px";
tDiv.style.top = top + "px";
}
//将该行的数据填充到文本框内
function completeField(tdvalue)
{
document.getElementById("wd").value=tdvalue.innerText;
document.getElementById("show_wd").style.display="none";
}
//计算控件相对于浏览器的位置
function calculateOffset(field, attr)
{
var offset = 0;
while(field) {
offset += field[attr];
field = field.offsetParent;
}
return offset;
}
//在输入框内点击上下回车
function KeyDown(evt)
{
evt = (evt) ? evt : ((window.event) ? window.event : "") //兼容IE和Firefox获得keyBoardEvent对象
var key = evt.keyCode?evt.keyCode:evt.which; //兼容IE和Firefox获得keyBoardEvent对象的键值
if(key==38)
{
//上
lightMove("up");
}
if(key==40)
{
//下
lightMove("down");
}
if(key==13)
{
//回车
lightMove("ok");
}
}
//高亮移动
function lightMove(cmd)
{
var tb = document.getElementById("tb");
if(cmd=="up")
{
//上
for(var i=0;i<tb.rows.length;i++)
{
if(tb.rows[i].className=="hlight")
{
tb.rows[i].className="normal";
i=i==0?tb.rows.length-1:i-1;
tb.rows[i].className="hlight";
sTxt(tb.childNodes[i].childNodes[0]);
}
}
}
if(cmd=="down")
{
for(var i=0;i<tb.rows.length;i++)
{
if(tb.rows[i].className=="hlight")
{
tb.rows[i].className="normal";
i=i==tb.rows.length-1?0:i+1;
tb.rows[i].className="hlight";
sTxt(tb.childNodes[i].childNodes[0]);
}
}
}
if(cmd=="ok")
{
for(var i=0;i<tb.rows.length;i++)
{
if(tb.rows[i].className=="hlight")
{
completeField(tb.rows[i]);
}
}
}
}
//将输入的内容写进Table
function insTR(tb)
{
var new_tr = tb.insertRow(tb.rows.length);
var new_td = new_tr.insertCell();
new_td.innerText=document.getElementById("wd").value;
new_tr.style.display="none";
new_tr.className="hlight";
}
//将数值写入文本框
function sTxt(td)
{
//alert(td.innerText);
document.getElementById("wd").value=td.innerText;
}
//高亮某行
function hLight(tr)
{
var tb = document.getElementById("tb");
for(var i=0;i<tb.rows.length;i++)
{
if(tb.rows[i].className=="hlight")
{
tb.rows[i].className="normal";
break;
}
}
tr.className="hlight";
}
window.onload = function()
{
setDiv();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="wd" type="text" style="width: 500px" autocomplete="off" onkeypress="doit(event)"
onkeydown="KeyDown(event)" />
<div id="show_wd" style="position: absolute; font-size: 12px; display:none">
</div>
</div>
</form>
</body>
</html>