jquery js模拟google suggest

我的js
$(document).ready(function()
{
   var $username=$(".username");
  var py=0;
  highlightindex=0;
  $("#now").val("ppp");
  var px=0;
  var $listbox=$(".listbox");
  var $namelist=$(".namelist");
  var offset=$username.offset();
     var offsetleft=offset.left;
    var offsettop=offset.top;
    var usernameheigth=$username.height();
    $username.blur(function()
       {
        $listbox.slideUp(200); 
       });
  $username.keyup(function(event)
  {
    var myevent = event || window.event; 
    var mykeycode = myevent.keyCode;
  
      var name=$(this).val();
   if(name.length>1){
    if(name.length<2)
    {
     if(mykeycode==8)
     {
      clearTimeout(timeout);
     }
    }
       timeout=setTimeout(function(){
      $.ajax(
      {
         url:"qc.php",
         data:"username="+name,
         type:"GET",
         success:function(html)
       {  
       if(html!=""){
       
          $listbox.css({
         "left":offsetleft+"px",
         "top":(offsettop+usernameheigth)+10+"px"
           }).slideDown(300);
          $listbox.html(html);
          $("li").hover(function()
          {
          $(this).addClass("hover");
         
          },function(){
         $(this).removeClass("hover");
          }).click(function(){
         $username.val($(this).text());
         $listbox.slideUp(300);
          }).mouseover(function(){
           $username.val($(this).text());
          })
     
        
       }
       else
       {
                $listbox.hide(1);
       }
       if(mykeycode==40)
         {
        
           if(highlightindex<0)
           {
           
            
             var jj=($(listbox).length)-1;
          
          highlightindex=jj;
             $("li").eq(highlightindex).addClass("hover"); highlightindex++;
                 
           }
           else if(highlightindex>=$("li",$listbox).length)
           {
            highlightindex=0;
           
             $("li").eq(highlightindex).addClass("hover"); highlightindex++;  $("#next").val(highlightindex);
           }
           else{
           
             $("li").eq(highlightindex).addClass("hover");
            highlightindex++;    }
           }
           if(mykeycode==38)
        {  if(highlightindex<0)
           {
            highlightindex=($("li",$listbox).length);
         $("li").eq(highlightindex).addClass("hover"); highlightindex--;  }
          else if(highlightindex==$("li",$listbox).length)
          {
              highlightindex=0;
            $("li").eq(highlightindex).addClass("hover");
             highlightindex--
          }else{
         
           $("li").eq(highlightindex).addClass("hover");
            highlightindex--;
          }
     
        }
        if(mykeycode==13)
        {
      
         var overload=$("li").eq(highlightindex-1).text();
         $username.val(overload);
        }
   }
  }
)
},10);
  
   }else{
       $listbox.hide(1);
     }
  
  });
   
});
html
   <h2>ajax</h2>
   <span>Enter you name</span>
   <input type="text" name="username" class="username"/>
   <div class="listbox">
     <div class="namelist">
     </div>
   </div>

css
.listbox{
display:none;
position:absolute;
width:200px;
background-color:#FFF;
color:#000;
border:1px solid #0CF;
border-bottom:none;
box-shadow:2px 2px 2px #000;
    -webkit-box-shadow:2px 2px 2px #5a5a5a;
    -moz-box-shadow:2px 2px 2px #123;
}
.namelist{
margin:0px;
padding:0px;line-height:30px;
list-style:none;
}
li{
padding:3px;
border-bottom:1px solid #0CF;
font-size:12px;
line-height:20px;
padding-left:4px;


}
.hover{
background:#ACF;

}
*{
list-style:none;

}
php
<?php
header("Content-type:text/html;Charset=UTF-8");
$name=$_GET['username'];
$con = mysql_connect("localhost", "hello", "123");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
$db_selected = mysql_select_db("数据库",$con) or die("cc");
mysql_query("set names 'UTF8'");
$sql ="select 名称 from 一个表 where 名称like '%$name%' ";
$result = mysql_query($sql,$con) or die(mysql_error());
if($result)
{
while ($row=mysql_fetch_array($result)){
    
      echo "<li>".$row['wname']."</li>";
}
}
mysql_close($con);
http://xinwenmm.co.cc