自动补全Demo-主要依据按下键盘keyup出发ajax事件交互返回自动提示

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 7         <title>自动补全Demo</title>
 8         <link rel="stylesheet" href="common.css" type="text/css" />
 9         <style type="text/css">
10             .listbox {
11                 position: relative;
12                 left: 53px;
13                 margin: 0;
14                 width: 180px;
15                 background-color: #000;
16                 color: #fff;
17                 border: 1px solid #000;
18             }
19             
20             .namelist {
21                 margin: 0;
22                 padding: 0;
23                 list-style: none;/*这个用来设置.namelist中包含的li*/
24             }
25             
26             .hover {
27                 background-color: lightblue;
28                 color:#fff;
29             }
30         </style>
31         <script src="jquery-1.5.2.js" type="text/javascript"></script>
32         <script type="text/javascript">
33             $(document).ready( function() {
34                 $('.listbox').hide();
35                 //当键盘键被松开时发生 keyup 事件。
36                 $('.username').keyup(
37                     function(){
38                         var username = $('username').val();
39                         var data = 'username=' + username;
40                         $.ajax({
41                             type:"POST",
42                             url:"autocomplete.jsp",
43                             data:data,
44                             success: function(html) {
45                                 $('.listbox').show();
46                                 $('.namelist').html(html);
47                                 $('li').hover(
48                                     function() {
49                                         $(this).addClass('hover');
50                                     },
51                                     function() {
52                                         $(this).removeClass('hover');
53                                     }
54                                 );
55                                 $('li').click(function(){
56                                     $('.username').val($(this).text());
57                                     $('.listbox').hide();
58                                 });
59                             }
60                         }); 
61                         
62                         return false;
63                     });
64                     
65                     $('.username').blur(function(){    //输入框失去焦点时
66                         $('.listbox').hide();
67                     });
68             });
69         </script>
70     </head>
71     <body>
72         <form>
73             <span class="label">用户名</span>
74             <input type="text" name="username" class="username" />
75             <div class="listbox">
76                 <div class="namelist"></div>
77             </div>
78         </form>
79     </body>
80 </html>

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Insert title here</title>
 8 </head>
 9 <body>
10 AAAAAAAAAAAAAAAAAAAAAA
11 </body>
12 </html>

posted on 2017-01-15 23:10 Sharpest 阅读(241) 评论(0) 编辑收藏举报