基于jquery框架的ajax搜索显示

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
     <head>
         <title>search_project.html</title>
         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
         <meta http-equiv="description" content="this is my page">
         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
         <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
         <script type="text/javascript" src="../jquery/jquery-1.4.2.js">
         </script>
         <script>
             //        $.ajax({
             //            url:"../Servlet_demo1",
             //            type:"POST",
             //            data:data,
             //            success:function(backData){
             //                var p = eval("("+backData+")");
             //                alert(p);
             //                alert(p.a);
             //                alert(p.b[1]);
             //
             //            }
             //        })
             //        $.getjson
             //        alert
             //        (console.info(data));
             //        alert(data.);
             //        $("#button1").click(function(){
             //        var data = $("#form1").serializeArray();
             //    });
         </script>
         <style>
             #searchText {
                 font-size: 25px;
                 width: 500px
             } #searchbutton {
                 font-size: 25px;
                 width: 100px
             } #div2 {
                 text-align: center;;
             } .ultext {
                 border: 2px solid grey;
                 margin-left: 650px;
                 width: 500px;
                 display: none;
             } .ultext li {
                 list-style: none;
                 padding:2px;
                 margin-left: 0px;
             }

              .keyData {
                 background: grey;
                 color: white;
             }
         </style>
         <script>
             //         var sendData ="" 

             $(function(){

                 $("#searchText").focus();
                 //                失去焦点了不显示

                 //增添鼠标移上去的事件
                 ;

                 $("#searchText").keyup(function(){
                     //设置不显示
                     $(".ultext").hide();
                     //删除上次的所有资源速
                     $(".ultext").empty();
                     //监听输入框是否落入，ajax远程发送请求
                     var text = $(this).val();
                     //                    alert($text);
                     //若有值则发送请求
                     if (text) {

                         $.post("../Servlet_demo1", {
                             keyWord: text
                         }, function(data){
                             //服务器返回的data
                             //                        alert(data);
                             var data2 = eval("(" + data + ")");
                             for (var a = 0; a < data2.length; a++) {
                                 //                            alert(data2[a]);
                                 $(".ultext").append("<li>" + data2[a] + "</li>");
                             }
                             //                            $(".ultext>span").wrap("<li></li>");
                                $(".ultext>li").mouseover(function(){
 //                                alert("iojio");
                                     $(".ultext>li").removeClass("keyData");
                                     $(this).addClass("keyData");

                             })
                               $(".ultext>li").click(function(){
 //                                   alert($(this).text());
                            $("#searchText").val($(this).text()) ;

                            })
                                   $(".ultext>li").mouseout(function(){
 //                                alert("iojio");
 //                                    $(".ultext>li").removeClass("keyData");
                                     $(this).removeClass("keyData");

                             })

                         })

                         $(".ultext").show();

                     }
                     else {
                         $(".ultext").hide();
                     }

                     //    $(".ultext").append("<span class='spanhaha'>"+data2[a]+"</span></br>");

                 });

                    /*
                     * 当失去焦点时先回调此函数，此函数执行完才会执行ajax的li监听点击事件
                     *
                     */
                            $("#searchText").blur(function(){
                                //判断是否鼠标放在了某个li上面？
                                if($(".ultext>li").hasClass("keyData")) {
                                 //若有则把选中的内容打印到text中去
                                $(this).val($(".ultext>li[class=keyData]").text());

                             }
 //                               setTimeout(alert("ijh"),1000);

                 //若没有 ， 说明鼠标点到了别的地方
                 //所以关闭div下拉
                         $(".ultext").hide();
                           $(".ultext").empty();
                 });

             });
         </script>
     </head>
     <body>
         <div id = "div2" align="center">
             <form id="form2" class = "form2">
                 <span><input type="text" id = "searchText"><input type="button" id="searchbutton"></span>
                 <div align="left" class="ultext">
                 </div>
             </form>
         </div>
     </body>
 </html>