效果图如下

  1.json数据格式

var _people=[{name:'朱瑞',url:'aaaaaa',nick:'zhu'},{name:'刘桂清',url:'aaaaa',nick:'liu'}]; 这里按姓氏排序借用了nick，不用nick的话，需要加载一个汉字拼音对照数组，判断匹配 2.javascript代码

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
     
      
'+temp+'
      
       ' 93                 } 94                 str+=this.renderOne(arr[i]); 95             } 96             if(str) str+="
       
      
"; 97             return str; 98         }, 99         renderOne:function(one){100             return '
      
'+one.name+'
';101         },102         renderIndex:function(){103             var str="";104 105             for(var i =0;i
      
       "+this.index[i]+"";107             }108             str+="
       MORE";109             return str;110         }111     };112     new RenderPage(new SortByGroup(_people,{tag:'nick'}).init()).init();113 })(jQuery);
      
     

3.html页面结构

     
     
	
      
		
       按字母搜索		
       
		
       
	
      
	
      	
      
			
      
	
      
     
     

　　

4.css样式

#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;}

　　

注：另外需要引入jquery，这里的json数据是在开始就引入的。后面的js代码直接引用了people这个变量（比较low）。