Dynamic Alphabetical Navigation

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

To generate the navigation bar, you could do something like this:

<cfoutput>
<cfloop from="#asc('A')#" to="#asc('Z')#" index="i">
    <a href="###chr(i)#">#chr(i)#</a>
    <cfif asc('Z') neq i>|</cfif>
</cfloop>
</cfoutput>

(CFLOOP doesn't work on characters, so you have to convert to ascii codes and back.)

---

To display the items in your query you could do something like this.

<cfset currentLetter = "">
<cfoutput query="data">
<cfif currentLetter neq left(data.name, 1)>
    <h3><a name="#ucase(left(data.name, 1))#">#ucase(left(data.name, 1))#</a></h3>
</cfif>
<cfset currentLetter = left(data.name, 1)>
#name#<br>
</cfoutput>

Answer 2

You could use the query grouping function on your query of records. You will obviously have to change the query fields according to your data and the left() function may be different syntax depending on your database engine. The query below works on MSSQL.

<cfquery datasource="#application.dsn#" name="qMembers">
SELECT firstname,lastname, left(lastname,1) as indexLetter
FROM member
ORDER BY indexLetter,lastName
</cfquery>


<p id="indexLetter">
<cfoutput query="qMembers" group="indexLetter">
    <a href="###qMembers.indexLetter#">#UCase(qMembers.indexLetter)#</a>
</cfoutput>
</p>




<cfif qMembers.recordCount>

    <table>

    <cfoutput query="qMembers" group="indexLetter">
        <tr>
            <th colspan="99" style="background-color:##324E7C;">
                <a name="#qMembers.indexLetter#" style="float:left;">#UCase(qMembers.indexLetter)#</a> 
                <a href="##indexLetter" style="color:##fff;float:right;">index</a>
            </th>
        </tr>

        <cfoutput>
        <tr>
            <td><strong>#qMembers.lastName#</strong> #qMembers.firstName#</td>
        </tr>
        </cfoutput>
    </cfoutput>

    </table>

<cfelse>
    <p>No Members were found</p>
</cfif>