[原创]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

为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               });

html结构

1    
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

后台主用通过get的方式以及keyword，type判定类别并返回内容

posted on 2010-02-26 11:28 nidilzhang 阅读(7154) 评论(2) 编辑收藏举报