[原创]jQuery实现搜索框自动完成功能
主要功能要点（已实现）
1.监听搜索框输入文本，根据搜索框文本变化情况即时通过Ajax向数据库查询搜索建议，并把建议反馈到搜索框下方的搜索建议框中，无搜索建议时自动隐藏建议框边框。
2.鼠标滑动到搜索建议框选取候选项目，并通过点击动作确定选中项目为查询内容并提交搜索请求。
3.监听键盘事件，当有搜索建议时，可以使用键盘上下键在搜索候选项目中循环选取，并可通过回车键确定选中项目为查询内容并提交搜索请求。
4.当鼠标和键盘同时操作时，保证选取项目的延续性，即鼠标与键盘间隔操作不会出现冲突。
5.屏蔽原浏览器自带搜索框自动完成。
6.搜索框内容随搜索建议框候选项的改变而改变。
扩展功能点（未实现）
1. 用户自己设定是否出现搜索框，并记录用户使用习惯。
2.自主关闭搜索框。
3.滚动条功能
体验缺点：在ie6下好像没有自动回收资源的机制，所以在ie6下多次使用改功能后有可能出现键盘相应延迟现象。
主要函数autoCom()
1
2 // autoCom
3
4
5 function autoCom(){
6
7 var searchKey;
8 var searchType;
9
10
11
12 searchKey = $( " form#searchBar input.input " ).attr( " value " );
13 searchType = $( " div#multipleselect a " ).attr( " class " );
14
15
16
17
18
19
20 if (searchKey){ // 判定文本框是否为空
21
22
23
24
25
26 $.get( " ../ajaxSearch/ajax.aspx " , {keyword:searchKey,type:searchType}, function (data, textStatus){ // 异步读取数据
27
28
29
30
31
32 var listLength; // li长度
33
34
35
36 var currentList; // 选中li位置
37
38 currentList = - 1 ; // 初始化为-1
39
40
41
42 $( " #searchSuggest ul " ).html(data); // 将异步读取内容显示到提示框中
43
44 listLength = $( " #searchSuggest ul li " ).length;
45
46 if (listLength > 1 ){ // 判断是否有返回内容
47
48 $( " #searchSuggest " ).show(); // 显示提示框
49
50
51 }
52
53 else {
54
55 $( " #searchSuggest " ).hide(); // 隐藏提示框
56
57
58 }
59
60
61
62 $( " #searchSuggest ul li " ).hover( function (){ // 定制提示框内滑动动作
63
64 $( " #searchSuggest ul li " ).removeClass(); // 先清除样式 避免跟键盘冲突
65
66 $( this ).addClass( " lihover " );
67
68 currentList = $( " #searchSuggest ul li " ).index( this )
69
70 }, function (){
71
72 $( this ).removeClass( " lihover " );
73
74
75
76 }).click( function (){ // 定制提示框内点击动作
77
78 var keywordContent;
79
80 keywordContent = $( this ).text();
81
82 $( " form#searchBar input.input " ).val(keywordContent);
83
84 $( " #searchSuggest " ).hide();
85
86
87 $( " form#searchBar " ).submit(); // 提交搜索请求
88
89 });
90
91
92 $(document).keydown( function (event){ // 键盘响应函数
93
94
95 event = event || window.event; // 兼容多浏览器
96
97 if (event.keyCode == 38 ){ // 监听上方向键
98
99
100
101
102
103 // alert("上");
104
105
106
107 if (currentList < 1 ){
108
109
110 currentList = listLength - 1 ;
111
112 $( " #searchSuggest ul li " ).removeClass(); // 先清除样式 避免冲突
113
114 $( " #searchSuggest ul li " ).eq(currentList).addClass( " lihover " );
115
116
117 }
118
119 else {
120
121
122 currentList -- ;
123
124 $( " #searchSuggest ul li " ).removeClass(); // 先清除样式 避免冲突
125
126 $( " #searchSuggest ul li " ).eq(currentList).addClass( " lihover " );
127
128
129
130
131 }
132
133
134
135
136
137 };
138 if (event.keyCode == 40 ){ // 监听下方向键
139
140
141
142 // alert("下");
143 if (currentList < (listLength - 1 ) ){
144
145 currentList ++ ;
146
147 $( " #searchSuggest ul li " ).removeClass(); // 先清除样式 避免冲突
148
149 $( " #searchSuggest ul li " ).eq(currentList).addClass( " lihover " );
150
151
152
153 }
154 else {
155
156
157 currentList = 0 ;
158
159 $( " #searchSuggest ul li " ).removeClass(); // 先清除样式 避免冲突
160
161 $( " #searchSuggest ul li " ).eq(currentList).addClass( " lihover " );
162
163 }
164
165
166 };
167
168 if (event.keyCode == 13 ){ // 监听回车键
169
170
171 if ($( " #searchSuggest ul li " ).length > 0 ){
172
173
174
175 keywordContent2 = $( " #searchSuggest ul li " ).eq(currentList).text();
176
177 $( " form#searchBar input.input " ).val(keywordContent2);
178
179 $( " #searchSuggest " ).hide();
180
181 // $("form#searchBar").submit();
182
183 }
184 else {
185
186
187
188
189 $( " form#searchBar " ).submit();
190
191
192
193 }
194
195
196
197
198
199
200
201
202
203
204
205 }
206
207
208
209 }); // 键盘相应结束
210
211
212
213
214
215
216
217 });
218
219
220
221 // end get function
222
223
224
225
226
227
228
229
230 $( " body " ).click( function (){ // 点击其他地方隐藏搜索建议提示框
231
232
233 $( " #searchSuggest " ).hide();
234
235 });
236
237 }
238
239 // end if
240 else
241 {
242
243
244 $( " #searchSuggest " ).hide();
245
246 };
247
248
249
250
251 };
252
253
254 // end autoCom
255
2 // autoCom
3
4
5 function autoCom(){
6
7 var searchKey;
8 var searchType;
9
10
11
12 searchKey = $( " form#searchBar input.input " ).attr( " value " );
13 searchType = $( " div#multipleselect a " ).attr( " class " );
14
15
16
17
18
19
20 if (searchKey){ // 判定文本框是否为空
21
22
23
24
25
26 $.get( " ../ajaxSearch/ajax.aspx " , {keyword:searchKey,type:searchType}, function (data, textStatus){ // 异步读取数据
27
28
29
30
31
32 var listLength; // li长度
33
34
35
36 var currentList; // 选中li位置
37
38 currentList = - 1 ; // 初始化为-1
39
40
41
42 $( " #searchSuggest ul " ).html(data); // 将异步读取内容显示到提示框中
43
44 listLength = $( " #searchSuggest ul li " ).length;
45
46 if (listLength > 1 ){ // 判断是否有返回内容
47
48 $( " #searchSuggest " ).show(); // 显示提示框
49
50
51 }
52
53 else {
54
55 $( " #searchSuggest " ).hide(); // 隐藏提示框
56
57
58 }
59
60
61
62 $( " #searchSuggest ul li " ).hover( function (){ // 定制提示框内滑动动作
63
64 $( " #searchSuggest ul li " ).removeClass(); // 先清除样式 避免跟键盘冲突
65
66 $( this ).addClass( " lihover " );
67
68 currentList = $( " #searchSuggest ul li " ).index( this )
69
70 }, function (){
71
72 $( this ).removeClass( " lihover " );
73
74
75
76 }).click( function (){ // 定制提示框内点击动作
77
78 var keywordContent;
79
80 keywordContent = $( this ).text();
81
82 $( " form#searchBar input.input " ).val(keywordContent);
83
84 $( " #searchSuggest " ).hide();
85
86
87 $( " form#searchBar " ).submit(); // 提交搜索请求
88
89 });
90
91
92 $(document).keydown( function (event){ // 键盘响应函数
93
94
95 event = event || window.event; // 兼容多浏览器
96
97 if (event.keyCode == 38 ){ // 监听上方向键
98
99
100
101
102
103 // alert("上");
104
105
106
107 if (currentList < 1 ){
108
109
110 currentList = listLength - 1 ;
111
112 $( " #searchSuggest ul li " ).removeClass(); // 先清除样式 避免冲突
113
114 $( " #searchSuggest ul li " ).eq(currentList).addClass( " lihover " );
115
116
117 }
118
119 else {
120
121
122 currentList -- ;
123
124 $( " #searchSuggest ul li " ).removeClass(); // 先清除样式 避免冲突
125
126 $( " #searchSuggest ul li " ).eq(currentList).addClass( " lihover " );
127
128
129
130
131 }
132
133
134
135
136
137 };
138 if (event.keyCode == 40 ){ // 监听下方向键
139
140
141
142 // alert("下");
143 if (currentList < (listLength - 1 ) ){
144
145 currentList ++ ;
146
147 $( " #searchSuggest ul li " ).removeClass(); // 先清除样式 避免冲突
148
149 $( " #searchSuggest ul li " ).eq(currentList).addClass( " lihover " );
150
151
152
153 }
154 else {
155
156
157 currentList = 0 ;
158
159 $( " #searchSuggest ul li " ).removeClass(); // 先清除样式 避免冲突
160
161 $( " #searchSuggest ul li " ).eq(currentList).addClass( " lihover " );
162
163 }
164
165
166 };
167
168 if (event.keyCode == 13 ){ // 监听回车键
169
170
171 if ($( " #searchSuggest ul li " ).length > 0 ){
172
173
174
175 keywordContent2 = $( " #searchSuggest ul li " ).eq(currentList).text();
176
177 $( " form#searchBar input.input " ).val(keywordContent2);
178
179 $( " #searchSuggest " ).hide();
180
181 // $("form#searchBar").submit();
182
183 }
184 else {
185
186
187
188
189 $( " form#searchBar " ).submit();
190
191
192
193 }
194
195
196
197
198
199
200
201
202
203
204
205 }
206
207
208
209 }); // 键盘相应结束
210
211
212
213
214
215
216
217 });
218
219
220
221 // end get function
222
223
224
225
226
227
228
229
230 $( " body " ).click( function (){ // 点击其他地方隐藏搜索建议提示框
231
232
233 $( " #searchSuggest " ).hide();
234
235 });
236
237 }
238
239 // end if
240 else
241 {
242
243
244 $( " #searchSuggest " ).hide();
245
246 };
247
248
249
250
251 };
252
253
254 // end autoCom
255
为input事件添加autoCom（）函数
1
$(
"
form#searchBar input.input
"
).keyup(
function
(event){
//
为搜索框加键盘事件监听
2
3
4 if ((event.keyCode != 38 ) && (event.keyCode != 40 ) && (event.keyCode != 13 )){ // 判断键盘事件，抛弃上下键跟回车键
5
6 autoCom();
7
8 }
9
10
11
12 });
2
3
4 if ((event.keyCode != 38 ) && (event.keyCode != 40 ) && (event.keyCode != 13 )){ // 判断键盘事件，抛弃上下键跟回车键
5
6 autoCom();
7
8 }
9
10
11
12 });
html结构
1
<!--
searchBar 搜索框
-->
2
3 < div class ="searchBar" >
4
5
6
7
8 < form id ="searchBar" action ="search.aspx" method ="post" >
9
10
11 < div id ="multipleselect" >< a class ="info" href ="#" > 资讯 </ a ></ div >
12
13
14
15 < div id ="choice" >
16 < ul >
17 < li >< a class ="info" href ="#" >< span > 资讯 </ span ></ a ></ li >
18 < li >< a class ="kl" href ="#" >< span > 知识 </ span ></ a ></ li >
19 < li >< a class ="product" href ="#" >< span > 产品 </ span ></ a ></ li >
20 < li >< a class ="brand" href ="#" >< span > 品牌 </ span ></ a ></ li >
21 < li >< a class ="company" href ="#" >< span > 企业 </ span ></ a ></ li >
22 < li >< a class ="business" href ="#" >< span > 商机 </ span ></ a ></ li >
23 < li >< a class ="logi" href ="#" >< span > 物流 </ span ></ a ></ li >
24 < li >< a class ="tech" href ="#" >< span > 技术 </ span ></ a ></ li >
25 < li >< a class ="inspect" href ="#" >< span > 食检 </ span ></ a ></ li >
26
27
28
29
30
31
32 </ ul >
33
34
35
36
37
38 </ div >
39
40
41
42
43
44
45 < input class ="input" name ="keyword" type ="text" autocomplete ="off" />
46
47
48 < input class ="submit" type ="submit" value ="搜索" />
49
50
51 < div id ="searchSuggest" >
52 < ul >
53
54
55
56
57 </ ul >
58
59
60 </ div >
61
62
63 </ form >
64 </ div >
65
66
67 <!-- end searchBar 搜索框 -->
2
3 < div class ="searchBar" >
4
5
6
7
8 < form id ="searchBar" action ="search.aspx" method ="post" >
9
10
11 < div id ="multipleselect" >< a class ="info" href ="#" > 资讯 </ a ></ div >
12
13
14
15 < div id ="choice" >
16 < ul >
17 < li >< a class ="info" href ="#" >< span > 资讯 </ span ></ a ></ li >
18 < li >< a class ="kl" href ="#" >< span > 知识 </ span ></ a ></ li >
19 < li >< a class ="product" href ="#" >< span > 产品 </ span ></ a ></ li >
20 < li >< a class ="brand" href ="#" >< span > 品牌 </ span ></ a ></ li >
21 < li >< a class ="company" href ="#" >< span > 企业 </ span ></ a ></ li >
22 < li >< a class ="business" href ="#" >< span > 商机 </ span ></ a ></ li >
23 < li >< a class ="logi" href ="#" >< span > 物流 </ span ></ a ></ li >
24 < li >< a class ="tech" href ="#" >< span > 技术 </ span ></ a ></ li >
25 < li >< a class ="inspect" href ="#" >< span > 食检 </ span ></ a ></ li >
26
27
28
29
30
31
32 </ ul >
33
34
35
36
37
38 </ div >
39
40
41
42
43
44
45 < input class ="input" name ="keyword" type ="text" autocomplete ="off" />
46
47
48 < input class ="submit" type ="submit" value ="搜索" />
49
50
51 < div id ="searchSuggest" >
52 < ul >
53
54
55
56
57 </ ul >
58
59
60 </ div >
61
62
63 </ form >
64 </ div >
65
66
67 <!-- end searchBar 搜索框 -->
后台主用通过get的方式以及keyword，type判定类别并返回内容