產生出英文字母選擇的清單，以及透過點擊英文字母而僅顯示出相對應的清單

alphabet_selection_list.js

<script type="text/javascript">
jQuery(document).ready(function($){
  
  $('.alphabet').click(function(){

    $(this).addClass('active').siblings().removeClass('active');
	
	  abc = $(this).data('abc');
	
	  $('.xxx').each(function(){
		
	    if ( abc == 'all' ) {
		
	  	  $(this).css('display','block');
		
  	  } else {
		
			  if ( $(this).data('abc') == abc ) {
			    $(this).css('display','block');
		    } else {
	  		  $(this).css('display','none');
  		  }
		
		  }
    });

  });
  
}); 
</script>

html.php

<?php 
  $abc_list = array( "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "all");
	
	echo "<ul id='abc_button_list' >";
	
	foreach( $abc_list as $abc ){
		echo "<li class='alphabet' data-abc='";
		echo $abc;
		echo "' >" . $abc ;
		echo "</li>";
	}
	  
	echo "</ul>";

?>

<?php $item_name = 'cat'; ?>

<ul>
  <li class="xxx" data-abc="a" >Apple</li>
  <li class="xxx" data-abc="b" >Banana</li>
  <li class="xxx" data-abc="<?php strtolower( $item_name[0] ); ?>" ><?php echo $item_name; ?></li>
</ul>