jQuery 實作類似 gmail 的 auto complete 效果

最近想要弄一個類似gmail的auto complete效果，因為找了一堆plugin都沒有我想要的效果，所以就自己實作了，功能寫出來了，不知道有沒有bug就是了。

首先準備一個類似下面的html

view plaincopy to clipboardprint

1. <label for="select_usr">Select User: </label>  
2. <div class="auto_com_block">  
3.     <input type="text" id="select_usr" >  
4.     <ul class="auto_com_result_list">  
5.     </ul>  
6. </div>  

auto complete的結果是放在一個ul內，再用position跳出dom去定位。

CSS如下

view plaincopy to clipboardprint

1. label{   
2.     padding-top:2px;   
3.     font-size:14px;   
4.     float:left;   
5.     margin-right:10px;   
6. }   
7. .auto_com_block{   
8.     position:relative;   
9.     float:left;   
10. }   
11. .auto_com_result_list{   
12.     position:absolute;   
13.     left:0;   
14.     top:20px;   
15.     border: 1px solid #B5DFF4;   
16.     padding:2px;   
17.     background:#fff;   
18.     display:none;   
19. }   
20. .auto_com_result_list li{   
21.     padding:2px;   
22.     background:#fff;   
23.     width:190px;   
24. }   
25. .auto_com_result_list li.this_result{   
26.     background:#def2ff;   
27. }   
28. .user_photo{   
29.     float:left;   
30.     margin-right:6px;   
31.     height:36px;   
32.     width:36px;   
33.     overflow:hidden;   
34. }   
35. .user_data{   
36.     float:left;   
37.     width:140px;   
38. }   
39. .auto_com_result_list li img{   
40.     height:36px;   
41. }  

範例沒有放真的篩選後的資料，真的要實作到系統就用ajax的方法去取得結果就好了，這邊先用一個物件去放等等要顯示的內容。

view plaincopy to clipboardprint

1. var data = [   
2.           {'name' : 'Bruce',   
3.            'email' : '[email protected]',   
4.            'picture' : 'pic.jpg'},   
5.           {'name' : 'Jack',   
6.            'email' : '[email protected]',   
7.            'picture' : 'pic2.jpg'},   
8.            {'name' : 'Jason',   
9.            'email' : '[email protected]',   
10.            'picture' : 'pic3.jpg'},   
11.            {'name' : 'Tom',   
12.            'email' : '[email protected]',   
13.            'picture' : 'pic4.jpg'},   
14.            {'name' : 'Jessica',   
15.            'email' : '[email protected]',   
16.            'picture' : 'pic5.jpg'},   
17.            {'name' : 'Andrew',   
18.            'email' : '[email protected]',   
19.            'picture' : 'pic.jpg'},   
20. ];  

我用滑鼠hover或鍵盤上下鍵選取篩選後的結果，所以就不用css的:hover去highlight選取的使用者，而是用js去控制，並把選取的結果記錄下來，下面這段是紀錄選取後要highlight的項目的。

view plaincopy to clipboardprint

1. $resultUsr=0; //focus on first result      
2. function thisResult(){   
3.     $(".auto_com_result_list li").removeClass("this_result").eq($resultUsr).addClass("this_result");   
4. }   
5. thisResult();  

然後就是在按enter或滑鼠點選時，要把值給丟到input欄位內的function

view plaincopy to clipboardprint

1. //get value from auto complete   
2. function getUser(num){   
3.     $selectUser=data[num].name;   
4.     $(".sender_name").val($selectUser);   
5.     $(".auto_com_result_list").hide();   
6.     $resultUsr=0;   
7.     thisResult();   
8. }  

最後就是判斷按鍵盤或滑鼠需要去highlight以及取得值，就大功告成了。

view plaincopy to clipboardprint

1. $(".auto_com_result_list li").hover(function(){   
2.     $resultUsr=$(this).index();   
3.     thisResult();   
4. });   
5. //get value from auto complete by mouse event   
6. $(".auto_com_result_list li").click(function(){   
7.     getUser($resultUsr);   
8. });   
9.     //get value from auto complete by key event    
10. $("#select_usr").keyup(function(e){   
11.     if($(this).val()!=""){   
12.         thisResult();   
13.         $(".auto_com_result_list").show();   
14.         if(e.keyCode==40){ //down   
15.             if($resultUsr < $resultLength-1){   
16.                 $resultUsr=$resultUsr+1;   
17.                 thisResult();   
18.             }   
19.         }else if(e.keyCode==38 && $resultUsr > 0){   
20.             $resultUsr=$resultUsr-1;   
21.             thisResult();   
22.         }else if(e.keyCode==13){   
23.             getUser($resultUsr);   
24.         }else{   
25.             $resultUsr=0;   
26.             thisResult();   
27.         };         
28.     }else{   
29.         $resultUsr=0;   
30.         thisResult();   
31.         $(".auto_com_result_list").hide();         
32.     }   
33. });   

DEMO