制作一个类似于百度搜索的事件代码

下面这页代码是我制作的一个简单的类似于百度主页搜索的事件。
主要事件是在文本框上输入关键字，下面会有一个div显示出来你模糊关键字的数据。
并且点击下面的数据，数据会直接跳到文本框中。
还有鼠标放上变色的一个小事件。
有兴趣的可以看一下。
<script src="jquery-1.11.2.min.js">
</script>
<style type="text/css">
*{ margin:0px; auto; padding:0px;}
#xianshi{ margin-top:30px; 300px; margin-left:500px;}
#txt{ 300px;}
#list{ 300px; height:100px; position:absolute;}
#name{ 295px; height:30px;}
.sj{300px; border:1px solid #000; background-color:#FFF;}
.sj:hover{cursor:pointer}
#fg{ margin-top:50px;}
</style>
<body>
//做一个div 用于锁定样式
<div id="xianshi">
//做一个div，里面套一个输入关键字的文本框 
    <div id="txt">
    //做一个文本框，设置id为name.
    <input type="text" id="name" />
    </div>
    做一个div，存放输入关键字后的搜索到的信息
    <div id="list"></div>
</div>
<hr id="fg" />
<table border="1" width="100%" cellpadding="0" cellpadding="0" id="td">

</table>
</body>
//开始编写jq特效
<script type="text/javascript">
$(document).ready(function(e) {
    //在id为name的文本框上加一个输入事件
    $("#name").keyup(function(){
        Xianshi();
        //取出文本框中的值，用key接收
        var key = $(this).val();
        //输入ajax
        $.ajax({
            async:false,
            url:"xianshichuli.php",
            data:{key:key,bs:0},
            type:"POST",
            dataType:"TEXT",
            success: function(data){
                if(data.trim()=="")
                {
                    
                }
                else
                {
                    //把传入的数组拆分成字符串
                var shuju = data.trim().split("|");
                var str = "";
                //循环这个数组
                for(var i = 0; i<shuju.length;i++)
                {
                    shuju[i];
                    str = str+"<div class = 'sj'>"+shuju[i]+"</div>"//把循环出来的字符串放入div里
                }
                $("#list").html(str);//把取出来的值放入list div里。
                $("#list").css("display","block")
            }
            }
            });
                            $(".sj").mouseover(function(){  //加入一个sj的鼠标放上事件
                
                    $("#sj").css("background-color","white");
                    $(this).css("background-color","#FC0");    //鼠标放上改变背景颜色
                    })    
                    
                    $(".sj").mouseout(function(){
                
                    $(this).css("background-color","white");    //鼠标移出返回原来的字体颜色
                    })    
            
            $(".sj").click(function(){ //加入一个sj的点击事件
                
                var text = $(this).text();//取出sj里的值， 用text接收。
                $("#name").val(text);//把取出的值放入name文本框里。
                $("#list").css("display","none")
                
                })        
            Xianshi();
        })
        

});
function Xianshi()
{
    var key = $("#name").val();
    $.ajax({
        
        url:"xianshichuli.php",
        data:{key:key,bs:1},
        type:"POST",
        dataType:"TEXT",
        success: function(data)
        {
            var hang = data.trim().split("|")
            
            var str = "<tr><td>汽车名称</td><td>型号</td><td>发布时间</td><td>油耗</td><td>汽车价格</td></tr>";
            for(var i=0; i<hang.length;i++)
            {
                var lie = hang[i].split("^");
                str = str +"<tr><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td>"+lie[7]+"</td></tr>";
            }
            
            $("#td").html(str);
        }
        
        })    
}
</script>