求一个完整的JS自能提示的搜索提示框的案例

看了很多网站的代码不是我看不懂就是有问题。
没有找到一个合适的、
有合适的地址网站请告诉我。
谢谢

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

http://www.scriptlover.com/controls/第33个是你需要的
<!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>
    <title></title>
    <style type ="text/css">
    html,body{width:100%;height:100%}
    ul{padding:0px;margin:0px;list-style:none;}
    li{cursor:pointer;padding:0px 5px; line-height:25px;height:25px;border-bottom:1px solid #dee; }
    .show{position:absolute; z-index:9999; width:200px; height:auto; display:none;border:1px solid #ddd; background-color:#fff}
    </style>
</head>
<body>
<p>
<table id="tb" border=1>
<tr><td><input type='text'  /></td><td>aaaaaaaa</td></tr>
<tr><td><input type='text' /></td><td>bbbbbbbb</td></tr>
<tr><td><input type='text' /></td><td>cccccccc</td></tr>
</table>    </div>
    </p>
</body>
<script type="text/javascript">
var  keys=['ada','sdfsd','bbb','sfga','dfhgfh','235s','dfew','ghjk','hjkghjk','fgjgfjf','fghjgfj','2345f','fthtr','sfgerw','tyerth','vnmu','wertewr','wert','asdfaf','zxcvd','gkju','dvfgdh','2354af','adsf','erterter','fghdfg','xvdfg','kjhu','qweasdas','xzce','werwre','zzczc','rtewtrew']; //  搜索值，可以用Ajax从数据库获取
function init(txt)
{
  var   divShow = document.createElement("div");
  divShow.className ="show";
  document.body.appendChild(divShow);
     divShow.onclick=function(e)
    {
        doClick(e,txt,this);
    };
    txt.onclick=function(e)
    {
         doClick(e,this,divShow);
    };
    txt.onkeyup=function(e){getSearchKeys(this,divShow);};

    bindEvent(document.body,'click',function()
    {
      divShow.style.display = "none";
    });}function doClick(e,txt,divShow){
e = e||event;
     var t = e.target||e.srcElement
    if(t.tagName.toLowerCase()=='li')
    {
       txt.value = t.innerHTML;
       divShow.style.display = "none";
       return;
    }
/**
    if(e && e.stopPropagation){
      //W3C取消冒泡事件
      e.stopPropagation();
      }else{
      //IE取消冒泡事件
      window.event.cancelBubble = true;
      }
      */
}
function getSearchKeys(txt,divShow)
{
  var s= txt.value.trim();
    if(s=='')
    {
        divShow.style.display = "none";
        return;
    }
      var arr=['<ul>'];
      for(var i=0;i<keys.length;i++)
      {
        if(keys[i].indexOf(s)>=0){
        arr.push('<li>'+keys[i]+'</li>');
        }
      }

      if(arr.length>1){
        arr.push('</ul>');
        divShow.innerHTML = arr.join('');
        var p =getAbsPoint(txt);
     divShow.style.left = p.x +'px';
     divShow.style.top = p.y + txt.offsetHeight + 'px';
        divShow.style.display = "block";
      }else{
        divShow.style.display = "none";
      }
}function getAbsPoint(e)
{
    var x = e.offsetLeft;
    var y = e.offsetTop;
    while(e = e.offsetParent)
    {
        x += e.offsetLeft;
        y += e.offsetTop;
    }
    return {"x": x, "y": y};
}
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g,'');
};
function bindEvent(obj,evt,fun)
{
     if(window.addEventListener){
           obj.addEventListener(evt, function(e){ fun(e);},false);
     }else{
           obj.attachEvent('on'+evt,fun);
    }
}
window.onload=function()
{
    var inputs= document.getElementById("tb").getElementsByTagName("input");
    for(var i=0;i<inputs.length;i++)
    {
    init(inputs[i]);
    }

};</script>
</html>
百度 jQuery autocomplete
你邮箱留下，我发你一个完整DEMO，我刚刚用这个做的