自动完成搜索

<form>
    <input id="q" type="text" onkeyup="" />
</form>
<style type="text/css">
    ul
    {
        margin: 0;
        padding: 0;
    }
    li
    {
        list-style-type: none;
    }
    #autoDiv
    {
        width: 152px;
        height: auto;
        font-size:12px;
        line-height:18px;
        background-color: #fFF;
        border: #005984 1px solid;
        font-family: "微软雅黑" , Arial, Verdana;
      
    }
    .menuLi
    {
        color: #000;
        font-family: "微软雅黑" , Arial, Verdana;
        cursor: default;
        padding-left: 5px;
        line-height: 18px;
        font-size: 12px;
    }
    .menuLi2
    {
        color: #FFF;
        border: #069;
        font-family: "微软雅黑" , Arial, Verdana;
        cursor: default;
        background-color: #338dcc;
        line-height: 18px;
        font-size: 12px;
    }
</style>

<script type="text/javascript" src="jquery-1.3.2.min.js">
</script>

<script type="text/javascript">
$(document).ready(function(){
   // var qValue = $('#q').val();
   var g_nIndex = 0;        //结果中被选中的那个项，默认为0，那就从1开始吧
   var maxIndex = 5;
    
    $('#q').after('<div id="autoDiv" style=""></div>');
    $('#autoDiv').hide();
    var GetReturenValue = function(q)
    {
         //alert(q);
         jQuery.ajax({
        type: "GET",
        url: "http://www.baidu.com",
        data: {'q':q,'type':0},
        success: function(data) {
                //alert(1);
                ParseXml(data);
               // alert(2);
                }
            });
    
    };
    
    var ParseXml = function(xml)
    {
        
        var rHtml = "<UL>\n";
        var $xml = jQuery(xml);
        /*
        $xml.find('r').each(function(){
              var $r = jQuery(this);
              rHtml += "<LI>" + $r.text() + "</LI>";
        });
        */
        var nLen = Math.floor(Math.random()*10+1);
        maxIndex = nLen+1;
        for(i=0; i<=nLen; ++i)
        {
             rHtml += "<LI>result " + i + "</LI>";
        }
        rHtml += "</UL>";
        ClearDiv();
        $('#autoDiv').html(rHtml);
        //显示
          $('#autoDiv').show();
        //给li绑定事件
        BindEventToLi();
    };
    
    var ClearDiv = function(){
        $('autoDiv').html('');
    };
    
    var Search = function(){
        var qValue = $('#q').val();
        if(qValue.length<=0)
        {
            $('#autoDiv').hide();
            return;
         }
        GetReturenValue(qValue);
    };
    
    $('#q').keyup(function(event){
       //alert(event.keyCode);
       if(event.keyCode==40)
       {
          AddResultIndex();
          SelectResultByIndex(g_nIndex);
          return false;
       }
       if(event.keyCode == 38)
       {
            SubResultIndex();
             SelectResultByIndex(g_nIndex);
             return false;
       }
        Search();
        g_nIndex = 0;
    });
    
    
    $('#q').blur(function(){
       // alert(1);
       
       var timeOutId = setTimeout(function(timeOutId){
                                        clearTimeout(timeOutId);
                                        $('#autoDiv').hide();
                                   },
                                   200);
        
        
    });
    
    
    var BindEventToLi = function(){
        $('#autoDiv').find('LI').each(function(){
            $(this).mouseover(function(){
                //alert(1);
                ClearLiBg();
                $(this).removeClass('menuLi');
                $(this).addClass('menuLi2');
               // alert($('#autoDiv').find('LI').index($(this)));
               g_nIndex = $('#autoDiv').find('LI').index($(this)) + 1;
              //$('#q').val($(this).text());
            });
            
            $(this).click(function(){
                $('#autoDiv').hide();
                alert('submit');
            });
        });
     };
     
     var ClearLiBg = function()
     {
         $('#autoDiv').find('LI').each(function(){
               $(this).removeClass('menuLi2');
                $(this).addClass('menuLi1');
        });
     }
     
     var AddResultIndex = function(){
         ++g_nIndex>maxIndex ? g_nIndex=1 : null;
       }
     var SubResultIndex = function()
     {
        
        --g_nIndex<=0 ? g_nIndex=maxIndex : null ; 
     }
     
     var SelectResultByIndex = function(nIndex){
        var i = 0;
        ClearLiBg();
         $('#autoDiv').find('LI').each(function(){
                i++;
                if(i==nIndex)
                {
                     $(this).removeClass('menuLi');
                        $(this).addClass('menuLi2');
                     $('#q').val($(this).text());
                    // alert("0" + this.innerHTML);
                 //   alert($(this).text);
                }
        });
     };
     
     
});
</script>