AutoComplete，水平有限做不下去了，求高人

这个很多问题，还有很多功能没实现我想达到类似GOOGLE的效果如：
1、鼠标在其它地方点击，提示框隐藏
2、上下方向键控制热点，文本框内容自动填充
3、在热点上按回车键触发事件
4、鼠标点击热点触发事件
<!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.   

    1、鼠标在其它地方点击，提示框隐藏
    2、上下方向键控制热点，文本框内容自动填充
    3、在热点上按回车键触发事件
    4、鼠标点击热点触发事件re
    1.注册document.click判断源不是文本框就隐藏
    2.注册文本框onkeydown来高亮选择的行，并控制显示内容
    3.注册文本框onkeydown 13
    4...
    可以看看：http://download.csdn.net/source/1842504
      

  2.   

    应该差不多了 - -!
    <!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>