1
+ <!DOCTYPE html>
2
+ < html >
3
+
4
+ < head >
5
+ < meta charset ="utf-8 ">
6
+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge,chrome=1 " />
7
+ < meta name ="renderer " content ="webkit ">
8
+ < meta name ="viewport " content ="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no " />
9
+ < meta name ="format-detection " content ="email=no " />
10
+ < meta name ="format-detection " content ="telephone=no " />
11
+ < meta name ="apple-mobile-web-app-capable " content ="yes " />
12
+ < meta http-equiv ="Cache-Control " content ="no-siteapp " />
13
+ < meta name ="apple-mobile-web-app-title " content ="moban ">
14
+ < link rel ="stylesheet " type ="text/css " href ="../css/normal.css " />
15
+ < link rel ="apple-touch-icon-precomposed " href ="http://7xkwkh.com1.z0.glb.clouddn.com/dog.png " />
16
+ < link rel ="shortcut icon " href ="http://7xkwkh.com1.z0.glb.clouddn.com/dog.ico " />
17
+ < title > 百度搜索</ title >
18
+ < style type ="text/css ">
19
+ body {
20
+ background-color : # ccc ;
21
+ }
22
+
23
+ form {
24
+ position : relative;
25
+ font-size : 14px ;
26
+ display : -webkit-box;
27
+ display : -moz-box;
28
+ display : -ms-flexbox;
29
+ display : -o-box;
30
+ display : box;
31
+ padding : 10px ;
32
+ width : 100% ;
33
+ }
34
+
35
+ form div .input {
36
+ display : block;
37
+ -webkit-box-flex : 1 ;
38
+ -moz-box-flex : 1.0 ;
39
+ -ms-flex : 1 ;
40
+ -o-box-flex : 1 ;
41
+ flex : 1 ;
42
+ position : relative;
43
+ background-color : # Fff ;
44
+ }
45
+
46
+ div .input input {
47
+ display : block;
48
+ padding : 10px ;
49
+ line-height : 1em ;
50
+ width : 100% ;
51
+ border : 1px solid # 999 ;
52
+ }
53
+
54
+ div .input input : focus {
55
+ border-color : # 3385ff ;
56
+ }
57
+
58
+ form button {
59
+ display : block;
60
+ background-color : # 3385ff ;
61
+ text-align : center;
62
+ padding : 10px 40px ;
63
+ color : # fff ;
64
+ line-height : 1em ;
65
+ }
66
+
67
+ ul .search_list {
68
+ position : absolute;
69
+ background-color : # fff ;
70
+ border : 1px solid # 999999 ;
71
+ z-index : 30 ;
72
+ width : 100% ;
73
+ margin-top : -1px ;
74
+ -moz-box-shadow : 0px 3px 8px rgba (0 , 0 , 0 , 0.3 );
75
+ -webkit-box-shadow : 0px 3px 8px rgba (0 , 0 , 0 , 0.3 );
76
+ box-shadow : 0px 3px 8px rgba (0 , 0 , 0 , 0.3 );
77
+ }
78
+
79
+ ul .search_list li {
80
+ padding : 5px 10px ;
81
+ transition : all 0.3s ;
82
+ font-size : 12px ;
83
+ }
84
+
85
+ ul .search_list li .on {
86
+ background-color : # ebebeb ;
87
+ }
88
+
89
+ .baidu_input {
90
+ position : relative;
91
+ }
92
+
93
+ input ::-webkit-search-cancel-button {
94
+ display : none;
95
+ }
96
+ </ style >
97
+ </ head >
98
+
99
+ < body >
100
+ < form action ="">
101
+ < div class ="input ">
102
+ < input type ="search " name ="search " autocomplete ="off " id ="" value ="" class ='baidu_input ' placeholder ="试试吧 " />
103
+ </ div >
104
+ < button > 搜索</ button >
105
+ </ form >
106
+ < script src ="../js/jQuery-2.1.4.min.js " type ="text/javascript " charset ="utf-8 "> </ script >
107
+ < script type ="text/javascript ">
108
+ $ ( function ( ) {
109
+ var now_search_code = '' ;
110
+ // var $script = $('<script>').appendTo('body');
111
+ $ ( '.baidu_input' ) . keyup ( function ( e ) {
112
+ var key_code = e . keyCode ;
113
+ var now_value = $ ( this ) . val ( ) ;
114
+ now_input_list = $ ( this ) ;
115
+ if ( key_code == 40 || key_code == 38 ) {
116
+ if ( ! $search_list ) {
117
+ return false ;
118
+ }
119
+ if ( key_code == 40 ) {
120
+ var $search_list_li = $search_list . find ( 'li.on' ) ;
121
+ if ( $search_list_li . length > 0 && $search_list_li . index ( ) != $search_list . find ( 'li' ) . length - 1 ) {
122
+ $search_list_li . removeClass ( 'on' ) . next ( ) . addClass ( 'on' ) ;
123
+ } else {
124
+ $search_list . find ( 'li' ) . removeClass ( 'on' ) . first ( ) . addClass ( 'on' ) ;
125
+ }
126
+ now_input_list . val ( $search_list . find ( 'li.on' ) . html ( ) )
127
+ } else if ( key_code == 38 ) {
128
+ var $search_list_li = $search_list . find ( 'li.on' ) ;
129
+ if ( $search_list_li . length > 0 && $search_list_li . index ( ) != 0 ) {
130
+ $search_list_li . removeClass ( 'on' ) . prev ( ) . addClass ( 'on' ) ;
131
+ } else {
132
+ $search_list . find ( 'li' ) . removeClass ( 'on' ) . last ( ) . addClass ( 'on' ) ;
133
+ }
134
+ now_input_list . val ( $search_list . find ( 'li.on' ) . html ( ) )
135
+ }
136
+ return false ;
137
+ }
138
+ //为空的时候清除下拉列表
139
+ if ( now_value == '' ) {
140
+ now_input_list . next ( '.search_list' ) . remove ( ) ;
141
+ return false ;
142
+ }
143
+ if ( now_search_code != now_value && now_value != '' && now_value != ' ' ) {
144
+ now_search_code = now_value ;
145
+ $ . ajax ( {
146
+ type : "get" ,
147
+ async : false ,
148
+ url : 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + now_value + '&json=1&p=3&cb=reload_list' ,
149
+ dataType : "jsonp" ,
150
+ jsonp : "reload_list" , //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
151
+ jsonpCallback : "flightHandler" , //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
152
+ } ) ;
153
+ // $script.remove();
154
+ // $script = $('<script>').appendTo('body');
155
+ // $script.attr('src', '').attr('src', 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + now_value + '&json=1&p=3&cb=reload_list')
156
+ } ;
157
+ } ) . blur ( function ( ) {
158
+ var tts = setTimeout ( function ( ) {
159
+ now_input_list . next ( '.search_list' ) . hide ( ) ;
160
+ } , 300 )
161
+ } ) . focus ( function ( ) {
162
+ $ ( this ) . next ( '.search_list' ) . show ( ) ;
163
+ } ) ;
164
+ } ) ;
165
+ var now_input_list , $search_list ;
166
+
167
+ function reload_list ( data ) {
168
+ if ( now_input_list . next ( ) . hasClass ( 'search_list' ) ) {
169
+ now_input_list . next ( ) . remove ( ) ;
170
+ } ;
171
+ if ( ( data . s ) . length > 0 ) {
172
+ $search_list = $ ( '<ul class="search_list"></ul>' ) . insertAfter ( now_input_list ) . on ( 'mouseover' , 'li' , function ( ) {
173
+ $ ( this ) . addClass ( 'on' ) . siblings ( ) . removeClass ( 'on' ) ;
174
+ } ) . on ( 'click' , 'li' , function ( ) {
175
+ now_input_list . val ( $search_list . find ( 'li.on' ) . html ( ) )
176
+ } ) ;
177
+ for ( var s = 0 ; s < ( data . s ) . length ; s ++ ) {
178
+ $search_list . append ( '<li>' + ( data . s ) [ s ] + '</li>' ) ;
179
+ } ;
180
+ }
181
+ } ;
182
+ </ script >
183
+ </ body >
184
+
185
+ </ html >
0 commit comments