2013年8月29日 星期四

jQuery 實作類似 gmail 的 auto complete 效果

Auto Complete

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

首先準備一個類似下面的html
  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如下
  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.     border1px 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的方法去取得結果就好了,這邊先用一個物件去放等等要顯示的內容。
  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的項目的。
  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
  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以及取得值,就大功告成了。
  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

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...