1 (function ($){
  2     function SortByGroup(arr,option){
  3         this.option=option;
  4         this.arr=arr||[];
  5     }
  6     SortByGroup.prototype={
  7         init:function(){
  8             this.sort();
  9             return this.sortByGroup(this.group());
 10         },
 11         sort:function(){
 12             var tag=this.option.tag;
 13             this.arr=this.arr.sort( function compareFunction(param1,param2){
 14                  return param1[tag].localeCompare(param2[tag]);
 15              });
 16         },
 17         group:function(){
 18             var arr=[],count=0,def;
 19             var charTemp="-1",temp;
 20             for(var i in this.arr){
 21                 temp=this.arr[i];
 22                 if(charTemp!==temp[this.option.tag].charAt(0)){
 23                     var one=[];
 24                     one.push(temp);
 25                     arr[count]=one;
 26                     charTemp=temp[this.option.tag].charAt(0);
 27                     count++;
 28                 }else{
 29                     arr[count-1].push(temp);
 30                 }
 31             }
 32             return arr;
 33         },
 34         sortByGroup:function(arr){
 35             var temp;
 36             for(var i =0;i<arr.length;i++){
 37                 temp=arr[i];
 38                 temp.sort(function compareFunction(param1,param2){
 39                     return param1['name'].localeCompare(param2['name']);
 40                 });
 41             };
 42             return arr;
 43         }
 44     };
 45     function RenderPage(arr){
 46         this.model=arr;
 47         this.index=[];
 48         this.lastIndex="-1";
 49     }
 50     RenderPage.prototype={
 51         init:function(){
 52
 53             $("#container").html(this.render());
 54             $("#index").html(this.renderIndex());
 55             this.bindEvent();
 56         },
 57         getIndex:function(nick){
 58             this.index.push(nick.charAt(0).toUpperCase());
 59
 60         },
 61         bindEvent:function(){
 62             $("#index a").mouseover(function(){
 63
 64                 var tag=$(this).attr("data");
 65                 if(tag!="more"){
 66                     $("#container .block").css("display","none");
 67                     $("#container ."+tag).css("display","block");
 68                 }else{
 69                     $("#container .block").css("display","block");
 70                 }
 71
 72             });
 73
 74
 75         },
 76         render:function(){
 77             var str="";
 78             for(var i=0;i<this.model.length;i++){
 79                 str+=this.renderGroup(this.model[i],i);
 80             }
 81
 82             return str;
 83         },
 84         renderGroup:function(arr,num){
 85             var str="",temp;
 86
 87             for(var i=0;i<arr.length;i++){
 88                 if(i==0){
 89                     this.getIndex(arr[i].nick);
 90                     temp=this.index[num];
 91
 92                     str='<div class="block '+temp+'"><h3>'+temp+'</h3><ul>'
 93                 }
 94                 str+=this.renderOne(arr[i]);
 95             }
 96             if(str) str+="<div class='clear'></div></ul></div>";
 97             return str;
 98         },
 99         renderOne:function(one){
100             return '<li><a href="'+one.url+'" target="_blank">'+one.name+'</a></li>';
101         },
102         renderIndex:function(){
103             var str="";
104
105             for(var i =0;i<this.index.length;i++){
106                 str=str+"<a data='"+this.index[i]+"'>"+this.index[i]+"</a>";
107             }
108             str+="<a data='more'>MORE</a>";
109             return str;
110         }
111     };
112     new RenderPage(new SortByGroup(_people,{tag:'nick'}).init()).init();
113 })(jQuery);

<!-- 区域32（按字母检索）Start -->
<div id="pd32" class="w1020"><div class="title4"><span>按字母搜索</span><p id="index" class="index"></p><div class="clear"></div></div><!--block--><div id="container" class="container"></div><!--block-->
</div>
<!-- 区域32（按字母检索）End -->

#pd32 .title4{border-bottom:1px solid #cecece;padding-bottom:10px;
}#pd32 .title4 p{float:right;
}#pd32 .title4 p a{background:none;padding:0px;float:none;color:#d26213;font-family:"Microsoft Yahei","����";font-size:22px;cursor:pointer;margin-left:12px;
}#pd32 .block{margin-top:15px;
}#pd32 .block h3{border-bottom:1px dotted #cfcfcf;font-size:30px;font-family:"Arial","Microsoft Yahei","����";color:#000;height:40px;line-height:40px;padding-bottom:5px;margin-bottom:8px;
}#pd32 .block ul{zoom:1;
}#pd32 .block li{float:left;display:inline;width:102px;height:30px;line-height:30px;overflow:hidden;font-size:16px;font-family:"Microsoft Yahei","����";
}#pd32 .block li a{color:#000;
}