基于jquery框架的ajax搜索显示 

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 <html>
  3     <head>
  4         <title>search_project.html</title>
  5         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6         <meta http-equiv="description" content="this is my page">
  7         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  8         <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  9         <script type="text/javascript" src="../jquery/jquery-1.4.2.js">
 10         </script>
 11         <script>
 12             //        $.ajax({
 13             //            url:"../Servlet_demo1",
 14             //            type:"POST",
 15             //            data:data,
 16             //            success:function(backData){
 17             //                var p = eval("("+backData+")");
 18             //                alert(p);
 19             //                alert(p.a);
 20             //                alert(p.b[1]);
 21             //                
 22             //            }
 23             //        })
 24             //        $.getjson
 25             //        alert
 26             //        (console.info(data));
 27             //        alert(data.);
 28             //        $("#button1").click(function(){
 29             //        var data = $("#form1").serializeArray();
 30             //    });
 31         </script>
 32         <style>
 33             #searchText {
 34                 font-size: 25px;
 35                 width: 500px
 36             } #searchbutton {
 37                 font-size: 25px;
 38                 width: 100px
 39             } #div2 {
 40                 text-align: center;;
 41             } .ultext {
 42                 border: 2px solid grey;
 43                 margin-left: 650px;
 44                 width: 500px;
 45                 display: none;
 46             } .ultext li {
 47                 list-style: none;
 48                 padding:2px;
 49                 margin-left: 0px;
 50             }
 51             
 52              .keyData {
 53                 background: grey;
 54                 color: white;
 55             }
 56         </style>
 57         <script>
 58             //         var sendData ="" 
 59             
 60             $(function(){
 61             
 62                 $("#searchText").focus();
 63                 //                失去焦点了不显示
 64              
 65                 
 66                 //增添鼠标移上去的事件 
 67                 ;
 68                 
 69                 $("#searchText").keyup(function(){
 70                     //设置不显示                        
 71                     $(".ultext").hide();
 72                     //删除上次的所有资源速
 73                     $(".ultext").empty();
 74                     //监听输入框是否落入，ajax远程发送请求
 75                     var text = $(this).val();
 76                     //                    alert($text);
 77                     //若有值则发送请求
 78                     if (text) {
 79                     
 80                         $.post("../Servlet_demo1", {
 81                             keyWord: text
 82                         }, function(data){
 83                             //服务器返回的data    
 84                             //                        alert(data);
 85                             var data2 = eval("(" + data + ")");
 86                             for (var a = 0; a < data2.length; a++) {
 87                                 //                            alert(data2[a]);
 88                                 $(".ultext").append("<li>" + data2[a] + "</li>");
 89                             }
 90                             //                            $(".ultext>span").wrap("<li></li>");
 91                                $(".ultext>li").mouseover(function(){
 92 //                                alert("iojio");
 93                                     $(".ultext>li").removeClass("keyData");
 94                                     $(this).addClass("keyData");
 95                                     
 96                                 
 97                             })
 98                               $(".ultext>li").click(function(){
 99 //                                   alert($(this).text());
100                            $("#searchText").val($(this).text()) ;
101                             
102                            })
103                                   $(".ultext>li").mouseout(function(){
104 //                                alert("iojio");
105 //                                    $(".ultext>li").removeClass("keyData");
106                                     $(this).removeClass("keyData");
107                                     
108                                 
109                             })
110                          
111                          
112                         })
113                         
114                       
115                         
116                         $(".ultext").show();
117                      
118                         
119                     }
120                     else {
121                         $(".ultext").hide();
122                     }
123                     
124                     
125                     //    $(".ultext").append("<span class='spanhaha'>"+data2[a]+"</span></br>");
126                 
127                 
128                 
129                 
130                 });
131                 
132                    
133                    
134                    /*
135                     * 当失去焦点时先回调此函数，此函数执行完才会执行ajax的li监听点击事件
136                     * 
137                     */
138                            $("#searchText").blur(function(){
139                                //判断是否鼠标放在了某个li上面？
140                                if($(".ultext>li").hasClass("keyData")) {
141                                 //若有则把选中的内容打印到text中去
142                                $(this).val($(".ultext>li[class=keyData]").text());
143                                 
144                             } 
145 //                               setTimeout(alert("ijh"),1000);
146 
147                 //若没有 ， 说明鼠标点到了别的地方
148                 //所以关闭div下拉
149                         $(".ultext").hide();
150                           $(".ultext").empty();
151                 });
152                 
153             });
154         </script>
155     </head>
156     <body>
157         <div id = "div2" align="center">
158             <form id="form2" class = "form2">
159                 <span><input type="text" id = "searchText"><input type="button" id="searchbutton"></span>
160                 <div align="left" class="ultext">
161                 </div>
162             </form>
163         </div>
164     </body>
165 </html>

 

posted on 2015-09-27 23:20  freedom's_blog  阅读(178)  评论(0)  编辑  收藏  举报

导航