Question

I’m using ColdFusion to return a result set from a SQL database and turn it into a list.

I need some way to generate an alphabetical navigation bar for that list. I have ColdFusion and the jQuery library available.

I’m looking to generate something like this:

A | B | C | ...       - A - A - B - B - B - C - D 

Where clicking on one of the letters drops you down the page to the first item for that letter. Not all 26 letters of the alphabet are necessarily in use.

Answer 1

So, there were plenty of good suggestions, but none did exactly what I wanted. Fortunately I was able to use them to figure out what I really wanted to do. The only thing the following doesn’t do is print the last few unused letters (if there are any). That’s why I have that cfif statement checking for ‘W’ as that’s the last letter I use, otherwise it should check for Z.

<cfquery datasource='#application.dsn#' name='qTitles'> SELECT title, url, substr(titles,1,1) as indexLetter FROM list ORDER BY indexLetter,title </cfquery>  <cfset linkLetter = '#asc('A')#'> <cfoutput query='titles' group='indexletter'>     <cfif chr(linkLetter) eq #qTitles.indexletter#>         <a href='###ucase(qTitles.indexletter)#'>#ucase(qTitles.indexletter)#</a>         <cfif asc('W') neq linkLetter>|</cfif>         <cfset linkLetter = ++LinkLetter>     <cfelse>         <cfscript>         while(chr(linkLetter) != qTitles.indexletter)                 {                         WriteOutput(' ' & chr(linkLetter) & ' ');                         IF(linkLetter != asc('W')){WriteOutput('|');};                         ++LinkLetter;                 }         </cfscript>          <a href='###ucase(qTitles.indexletter)#'>#ucase(qTitles.indexletter)#</a>         <cfif asc('W') neq linkLetter>|</cfif>         <cfset linkLetter = ++LinkLetter>     </cfif> </cfoutput>  <ul> <cfset currentLetter = ''> <cfoutput query='qTitles' group='title'> <cfif currentLetter neq #qTitles.indexletter#>     <li><a name='#ucase(qTitles.indexletter)#'>#ucase(qTitles.indexletter)#</a></li> </cfif> <cfset currentLetter = #qTitles.indexletter#> <li><a href='#url#'>#title#</a></li> </cfoutput> </ul>