AutoComplete，水平有限做不下去了，求高人
这个很多问题，还有很多功能没实现
我想达到类似GOOGLE的效果
如：
1、鼠标在其它地方点击，提示框隐藏
2、上下方向键控制热点，文本框内容自动填充
3、在热点上按回车键触发事件
4、鼠标点击热点触发事件
- 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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test </title>
<style type="text/css">
body,html{ margin:0; padding:0;}
.box{ margin:100px; float:left; clear:both; position:relative; width:600px; height:100px; border:1px solid #CCCCCC;}
.info{width:202px; width:204px \9; height:auto; border:1px solid #CCCCCC; background:#FFFFFF; border-top:none; position:absolute;top:51px; left:100px; display:none;}
.info ul{ margin:0; padding:0;}
.info li{ clear:both; float:left; width:100%; line-height:22px; text-indent:5px;list-style:none; font-size:12px; cursor:default;}
.info_hover{ background:#FF6600;}
</style>
</head>
<body>
<div class="box">
<div class="info" id="info">
<ul>
<li>中国成为世行第3大股东国 </li>
<li>折射世界政治经济版图变化 </li>
<li>周强任湖南省委书记 </li>
<li>张春贤任新疆自治区党委书记 </li>
</ul>
</div>
<input type="text" name="search" id="search" value="" style=" position:absolute; left:100px; top:30px; width:200px;" />
</div>
<script type="text/javascript">
var easychange = function(foochange){
if(!foochange||foochange.constructor!=Function){return;}
try{this.watch("value",function(id,oldval,newval){foochange(newval);return newval;});}catch(e){}
this.setAttribute('oninput','('+foochange.toString()+')(this.value)');
this.onpropertychange = function(){foochange(this.value);};
//this.onmousemove = function(){foochange(this.value);};
//this.onkeyup = function(){foochange(this.value);};
};
var dx = document.getElementById('search');
var info = document.getElementById('info');
var s=document.getElementById("search");
var sear=function(newvalue){
if(newvalue!=""){
info.style.display="inline";
var index=0;
var li=document.getElementsByTagName("li");
for(i=0;i <li.length;i++){
(function(m){
li[m].onmouseover=function(){this.className="info_hover"}
li[m].onmouseout=function(){this.className=""}
}
)(i)
}
window.onkeydown=document.body.onkeydown=function (e){
switch ((window.event||e).keyCode){
case 38:ud(-1);break;
case 40:ud(1);break;
}
}
function ud(n){
index+=n;
if(index <0)index=li.length-1;
if(index>li.length-1)index=0;
for(i=0;i <li.length;i++){
li[i].className="";
}
li[index].className="info_hover";
s.value=li[index].innerHTML;
}
}
else{
info.style.display="none";
}
}
easychange.call(dx,sear);
function c(){
info.style.display="none";
}
</script>
</body>
</html>
[解决办法]
先帮顶！
[解决办法]
1、鼠标在其它地方点击，提示框隐藏
2、上下方向键控制热点，文本框内容自动填充
3、在热点上按回车键触发事件
4、鼠标点击热点触发事件
re
1.注册document.click判断源不是文本框就隐藏
2.注册文本框onkeydown来高亮选择的行，并控制显示内容
3.注册文本框onkeydown 13
4...
可以看看：http://download.csdn.net/source/1842504
[解决办法]
佩服楼主的勇气！！！
支持一个！！！
[解决办法]
[解决办法]
纯粹帮顶，楼主你的代码超过了我们的兴趣，太长了
[解决办法]
应该差不多了。。。 - -!
- 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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>test</title><style type="text/css"> body,html{ margin:0; padding:0;} .box{ margin:100px; float:left; clear:both; position:relative; width:600px; height:100px; border:1px solid #CCCCCC;} .info{width:202px; height:auto; border:1px solid #CCCCCC; background:#FFFFFF; border-top:none; position:absolute;top:51px; left:100px; display:none;} .info ul{ margin:0; padding:0;} .info li{ clear:both; float:left; width:100%; line-height:22px; text-indent:5px;list-style:none; font-size:12px; cursor:default;} .info_hover{ background:#FF6600;}</style></head><body><div class="box"><div class="info" id="info"> <ul> <li>中国成为世行第3大股东国</li> <li>折射世界政治经济版图变化</li> <li>周强任湖南省委书记</li> <li>张春贤任新疆自治区党委书记</li> </ul></div><input type="text" name="search" id="search" value="" style=" position:absolute; left:100px; top:30px; width:200px;" /></div><script type="text/javascript">var easychange = function(foochange) { if(!foochange||foochange.constructor!=Function){return;} try{this.watch("value",function(id,oldval,newval){foochange(newval);return newval;});}catch(e){} this.setAttribute('oninput','('+foochange.toString()+')(this.value)'); this.onpropertychange = function(){foochange(this.value);}; //this.onmousemove = function(){foochange(this.value);}; //this.onkeyup = function(){foochange(this.value);};};var sear = (function() { var info = document.getElementById('info'); var s = document.getElementById("search"); var index = -1; var li = document.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { (function(m) { li[m].onmouseover = function() { this.className = "info_hover"; index = m; }; li[m].onmouseout = function() { this.className = ""; }; li[m].onclick = function(){ s.value = this.innerHTML; alert("OK"); }; })(i) } document.onkeydown = function(e) { switch ((window.event || e).keyCode) { case 38: ud( -1); break; case 40: ud(1); break; } } s.onkeydown = function(e){ switch ((window.event || e).keyCode) { case 13: alert('OK'); break; } }; s.onclick = function(e){ if(window.event){ event.cancelBubble = true; }else{ e.stopPropagation(); } }; document.onclick = function(){ info.style.display = "none"; }; function ud(n) { index += n; if (index < 0) index = li.length - 1; if (index > li.length - 1) index = 0; for (i = 0; i < li.length; i++) { li[i].className = ""; } li[index].className = "info_hover"; s.value = li[index].innerHTML; } return function(newvalue) { if (newvalue != "") { document.getElementById('info').style.display = "inline"; } else { document.getElementById('info').style.display = "none"; } }})();easychange.call(document.getElementById('search'), sear);</script></body></html>