jQuery自己写的一个类似google自动提示的插件，源代码奉上

 

2. jQuery.fn.extend({
3. jComplete:function(ID,url) { 
5.     var key="#"+ID;//输入框ID
6.     var kurl=url;//异步交互URL
7.     var keword=$(key).get(0).name;//参数名称
8.     
9.     $(key).attr('autocomplete','off');//设置浏览器的自动提示关闭
10.     var $autocomplete=$('<div id=/"smallContent/"></div>').hide().insertAfter(key);
11.     
12.     var selectedItem=null;//当前选中项
13.     var setSelectedItem=function(item){//设置但前选中项setSelectedItem(item)
14.         selectedItem=item;
15.         if(selectedItem===null){
16.             $autocomplete.hide();
17.             return;
18.         }
19.         /*不能循环选择的代码
20.         if(selectedItem<0){
21.             selectedItem=0;
22.         }
23.         if(selectedItem>=$autocomplete.children().find('li').length){
24.             selectedItem=$autocomplete.children().find('li').length-1;
25.         }*/
26.         if(selectedItem<0){
27.             selectedItem=$autocomplete.children().find('li').length-1;
28.         }
29.         if(selectedItem>=$autocomplete.children().find('li').length){
30.             selectedItem=0;
31.         }
32.         $autocomplete.children().find('li').removeClass('hov').eq(selectedItem).addClass('hov');
33.         $autocomplete.show();
34.     }
35.     
36.     $(key).keyup(function(event){
37.     
38.         event||(event=window.event);//为了兼容浏览器，如果没有这个，只适用于IE
39.         if(event.keyCode>40||event.keyCode==8||event.keyCode==32||event.keyCode==13){
40.         /*
41.         代码为40和以下的键，是特殊键，包括（回车，方向，退出等）
42.         8为Backspace键
43.         32为空格[为了适应中文输入法]
44.         13为回车[为了适应中文输入法]
45.         */
46.         if(event.keyCode==13)//回车键
47.         {
48.             $(key).val($autocomplete.children().find("li").eq(selectedItem).html());
49.             $autocomplete.hide();
50.             $("form").submit(function(){return false});//阻止页面提交
51.         }
52.         selectedItem=null;//重置一下选中项,由于它是一个全局变量
53.         
54.                 $.ajax({ 
55.                       type: "GET", 
56.                       url:kurl, 
57.                       //data:"keyword="+encodeURI($(key).val()), //另一种书写形式
58.                       data:{keyword:encodeURI($(key).val())},
59.                       success: function(data){ 
60.                          if(data!="") { 
61.                              $autocomplete.empty();
62.                              var text="<ul>"+data+"</ul>";
63.                              $autocomplete.html(text);
64.                              if($autocomplete.children().find('li').length<1)//当没有加载数据的时候隐藏
65.                              {$autocomplete.hide();}
66.                              /**/
67.                              $autocomplete.children().find('li').mouseover(function(){//这里实现的是鼠标选取，与下面的冲突，故把下面的注释掉
68.                                 setSelectedItem($autocomplete.children().find('li').index(this));
69.                                 //alert(selectedItem);
70.                              }).click(function(){//实现鼠标点击，选择自动提示的内容
71.                                 //$(key).get(0).value = $(this).html();
72.                                 $(key).val($autocomplete.children().find("li").eq(selectedItem).html());
73.                                 //$("form").get(0).submit(); //鼠标点击提交页面
74.                                 $autocomplete.hide();
75.                                 return; 
76.                              }).mouseout(function(){//这里实现鼠标移出，自动提示框
77.                                 $(this).removeClass("hov");
78.                              });
79.                              /**/
80.                              $autocomplete.show();  
81.                          }//end if
82.                          else{
83.                              $autocomplete.hide();
84.                          } //end else
85.                         
86.                         
87.                       }//end function(data)
88.                });//end $.ajax
89.         }//end if(event.keyCode>40||event.keyCode==8)
90.         else if(event.keyCode==27){//退出ESC
91.             $(key).val("");
92.             $autocomplete.hide();
93.         }
94.         else if(event.keyCode==38)//上方向键
95.         {
96.                 //alert('你选择了上方向键');
97.                 if($(key).val()==""){//用于阻止，直接按下方向键，载入原来的数据
98.                     $autocomplete.empty();
99.                     $autocomplete.hide();
100.                 }
101.                 if($autocomplete.children().find('li').length<1){//如果没有找到li，不显示下面的div
102.                     $autocomplete.empty();
103.                     $autocomplete.hide();
104.                 }
105.                 else{
106.                 setSelectedItem(selectedItem-1);
107.                 $(key).val($autocomplete.children().find("li").eq(selectedItem).html());
108.                 }
109.         }
110.         else if(event.keyCode==40)//下方向键
111.         {
112.                 //alert('你选择了下方向键')
113.                 if($(key).val()==""){//用于阻止，直接按下方向键，载入原来的数据
114.                     $autocomplete.empty();
115.                     $autocomplete.hide();
116.                 }
117.                 if($autocomplete.children().find('li').length<1){//如果没有找到li，不显示下面的div
118.                     $autocomplete.empty();
119.                     $autocomplete.hide();
120.                 }
121.                 else{
122.                     if(selectedItem===null){//如果没有这个判断，而直接写esle里面的语句，那么第一次就按下方向键，会直接选择第二个，我猜是因为null+1=1吧
123.                         setSelectedItem(0);
124.                     }else{
125.                     setSelectedItem(selectedItem+1);
126.                     }
127.                     $(key).val($autocomplete.children().find("li").eq(selectedItem).html());
128.                 }
129.         }       
130.     });//end keyup
131.     
132.     $(key).blur(function(){//点击一下文档其他地方，取消提示[其实就是鼠标移出，文本框的时候，提示取消]
133.         if(selectedItem===null){
134.             $autocomplete.hide();
135.             return;
136.         }
137.         selectedDiv = $autocomplete.children().find(".hov");
138.         if(selectedDiv.length<1){
139.               $autocomplete.hide();
140.               return;
141.         }
142.     });//end $(key).blur
143. }}); //end all