title: Client side alphabetic multi-column (lists) sorting and filtering
body: <p>I have an index of "services" which is quite large, and I am trying to make it user friendly.</p>
  
  <p>The current display is four columns (four unordered lists, at the moment) that displays alphabetically top to bottom, then left to right like so:</p>
  
  <pre><code>Ab      Be      Co      En
  Ac      Ce      De      Fa
  Af      Ci      Ef      Gu
  </code></pre>
  
  <p>These lists are built in the C# code behind, then the BulletedList controls are attached to the containing Panel control on page load.</p>
  
  <p>The number of items has become large enough that we want to make use of filtering giving a list across the top for # A B C D... etc, and when you click on it, it will filter the results. We want to accomplish this using JavaScript, and avoiding post backs. </p>
  
  <p>My initial thought was to have JavaScript (jQuery) simply .show() and .hide() the ones necessary, but with the current unordered list arrangement, I am struggling with how to accomplish this and maintain the alphabetic layout.</p>
  
  <p>For example, using the four unordered lists example above, filtering for A would result in just this:</p>
  
  <pre><code>Ab
  Ac
  Af
  </code></pre>
  
  <p>instead of spanning across the columns.</p>
  
  <p>Taking the thought further, I considered using a single unordered list and having list items float left to easily span across the screen and then down -- but the issue I run into that is sorting alphabetically down first and then across, because it sorts across first and then down.</p>
  
  <p>Additionally, using the float left method causes any link that spans two lines to cause an extra line break for all links across the row, resulting in odd gaps.</p>
  
  <p>I realize this is fairly long winded and specific question, but any assistance on how to accomplish this with code, html/css formatting, or suggestions for a better way of doing this is much appreciated! Thanks for taking the time to read the question.</p>