<p>I'm using <code>ColdFusion</code> to return a result set from a SQL database and turn it into a list.</p>

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

<p>I'm looking to generate something like this:</p>

<pre><code>A | B | C | ...      
- A
- A
- B
- B
- B
- C
- D
</code></pre>

<p>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.</p>

[{'answer_id': 16545, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 1, 'selected': False, 'text': '<p>I would get the SQL result set to return the list in the first place, you can easily just take the first letter of the required item, and a count.  The quickest way would be to do a join on a table of 26 characters (less string manipulation that way).</p>\n\n<p>In CF use the count value to ensure that if there is no result you either only display the letter (as standard text) or dont display it at all.</p>\n\n<p>How many rows are you going to be working on as there may be better ways of doing this.  For example, storing the first letter of your required link field in a separate column on insert would reduce the overhead when selecting.</p>\n'}, {'answer_id': 16555, 'author': 'Patrick McElhaney', 'author_id': 437, 'author_profile': 'https://Stackoverflow.com/users/437', 'pm_score': 3, 'selected': False, 'text': '<p>To generate the navigation bar, you could do something like this:</p>\n\n<pre><code>&lt;cfoutput&gt;\n&lt;cfloop from="#asc(\'A\')#" to="#asc(\'Z\')#" index="i"&gt;\n    &lt;a href="###chr(i)#"&gt;#chr(i)#&lt;/a&gt;\n    &lt;cfif asc(\'Z\') neq i&gt;|&lt;/cfif&gt;\n&lt;/cfloop&gt;\n&lt;/cfoutput&gt;\n</code></pre>\n\n<p>(CFLOOP doesn\'t work on characters, so you have to convert to ascii codes and back.)</p>\n\n<hr>\n\n<p>To display the items in your query you could do something like this.</p>\n\n<pre><code>&lt;cfset currentLetter = ""&gt;\n&lt;cfoutput query="data"&gt;\n&lt;cfif currentLetter neq left(data.name, 1)&gt;\n    &lt;h3&gt;&lt;a name="#ucase(left(data.name, 1))#"&gt;#ucase(left(data.name, 1))#&lt;/a&gt;&lt;/h3&gt;\n&lt;/cfif&gt;\n&lt;cfset currentLetter = left(data.name, 1)&gt;\n#name#&lt;br&gt;\n&lt;/cfoutput&gt;\n</code></pre>\n'}, {'answer_id': 67091, 'author': 'mjb', 'author_id': 10064, 'author_profile': 'https://Stackoverflow.com/users/10064', 'pm_score': 2, 'selected': False, 'text': '<p>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.</p>\n\n<pre><code>&lt;cfquery datasource="#application.dsn#" name="qMembers"&gt;\nSELECT firstname,lastname, left(lastname,1) as indexLetter\nFROM member\nORDER BY indexLetter,lastName\n&lt;/cfquery&gt;\n\n\n&lt;p id="indexLetter"&gt;\n&lt;cfoutput query="qMembers" group="indexLetter"&gt;\n    &lt;a href="###qMembers.indexLetter#"&gt;#UCase(qMembers.indexLetter)#&lt;/a&gt;\n&lt;/cfoutput&gt;\n&lt;/p&gt;\n\n\n\n\n&lt;cfif qMembers.recordCount&gt;\n\n    &lt;table&gt;\n\n    &lt;cfoutput query="qMembers" group="indexLetter"&gt;\n        &lt;tr&gt;\n            &lt;th colspan="99" style="background-color:##324E7C;"&gt;\n                &lt;a name="#qMembers.indexLetter#" style="float:left;"&gt;#UCase(qMembers.indexLetter)#&lt;/a&gt; \n                &lt;a href="##indexLetter" style="color:##fff;float:right;"&gt;index&lt;/a&gt;\n            &lt;/th&gt;\n        &lt;/tr&gt;\n\n        &lt;cfoutput&gt;\n        &lt;tr&gt;\n            &lt;td&gt;&lt;strong&gt;#qMembers.lastName#&lt;/strong&gt; #qMembers.firstName#&lt;/td&gt;\n        &lt;/tr&gt;\n        &lt;/cfoutput&gt;\n    &lt;/cfoutput&gt;\n\n    &lt;/table&gt;\n\n&lt;cfelse&gt;\n    &lt;p&gt;No Members were found&lt;/p&gt;\n&lt;/cfif&gt;\n</code></pre>\n'}, {'answer_id': 137090, 'author': 'alexp206', 'author_id': 666, 'author_profile': 'https://Stackoverflow.com/users/666', 'pm_score': 1, 'selected': True, 'text': '<p>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.</p>\n\n<pre><code>&lt;cfquery datasource="#application.dsn#" name="qTitles"&gt;\nSELECT title, url, substr(titles,1,1) as indexLetter\nFROM list\nORDER BY indexLetter,title\n&lt;/cfquery&gt;\n\n&lt;cfset linkLetter = "#asc(\'A\')#"&gt;\n&lt;cfoutput query="titles" group="indexletter"&gt;\n    &lt;cfif chr(linkLetter) eq #qTitles.indexletter#&gt;\n        &lt;a href="###ucase(qTitles.indexletter)#"&gt;#ucase(qTitles.indexletter)#&lt;/a&gt;\n        &lt;cfif asc(\'W\') neq linkLetter&gt;|&lt;/cfif&gt;\n        &lt;cfset linkLetter = ++LinkLetter&gt;\n    &lt;cfelse&gt;\n        &lt;cfscript&gt;\n        while(chr(linkLetter) != qTitles.indexletter)\n                {\n                        WriteOutput(" " &amp; chr(linkLetter) &amp; " ");\n                        IF(linkLetter != asc(\'W\')){WriteOutput("|");};\n                        ++LinkLetter;\n                }\n        &lt;/cfscript&gt;\n\n        &lt;a href="###ucase(qTitles.indexletter)#"&gt;#ucase(qTitles.indexletter)#&lt;/a&gt;\n        &lt;cfif asc(\'W\') neq linkLetter&gt;|&lt;/cfif&gt;\n        &lt;cfset linkLetter = ++LinkLetter&gt;\n    &lt;/cfif&gt;\n&lt;/cfoutput&gt;\n\n&lt;ul&gt;\n&lt;cfset currentLetter = ""&gt;\n&lt;cfoutput query="qTitles" group="title"&gt;\n&lt;cfif currentLetter neq #qTitles.indexletter#&gt;\n    &lt;li&gt;&lt;a name="#ucase(qTitles.indexletter)#"&gt;#ucase(qTitles.indexletter)#&lt;/a&gt;&lt;/li&gt;\n&lt;/cfif&gt;\n&lt;cfset currentLetter = #qTitles.indexletter#&gt;\n&lt;li&gt;&lt;a href="#url#"&gt;#title#&lt;/a&gt;&lt;/li&gt;\n&lt;/cfoutput&gt;\n&lt;/ul&gt;\n</code></pre>\n'}, {'answer_id': 60471224, 'author': 'Bryan Elliott', 'author_id': 1388588, 'author_profile': 'https://Stackoverflow.com/users/1388588', 'pm_score': 0, 'selected': False, 'text': '<p>This question was posted quite a long time ago, but there is now an open source vanilla JavaScript plugin available that will alphabetically filter any HTML list with alphabetical navigation</p>\n\n<p>It\'s called <a href="https://elliottprogrammer.github.io/alphaListNav.js/" rel="nofollow noreferrer">AlphaListNav.js</a></p>\n\n<p>Just output your HTML list (in your case, your list generated with <code>Coldfusion</code>:</p>\n\n<pre><code>&lt;ul id="myList"&gt;\n  &lt;li&gt;Eggplant&lt;/li&gt;\n  &lt;li&gt;Apples&lt;/li&gt;\n  &lt;li&gt;Carrots&lt;/li&gt;\n  &lt;li&gt;Blueberries&lt;/li&gt;  \n&lt;/ul&gt;\n</code></pre>\n\n<p>Add the CSS in the <code>&lt;head&gt;</code> of your page:</p>\n\n<pre><code>&lt;link rel="stylesheet" href="alphaListNav.css"&gt;\n&lt;!-- note: you can edit/overide the css to customize how you want it to look --&gt;\n</code></pre>\n\n<p>Add the JavaScript file just before the closing <code>&lt;/body&gt;</code> tag:</p>\n\n<pre><code>&lt;script src="alphaListNav.js"&gt;&lt;/script&gt;\n</code></pre>\n\n<p>And then Initialize the AlphaListNav library on your list by passing it the id of your list. Like so:</p>\n\n<pre><code>&lt;script&gt;\n    new AlphaListNav(\'myList\');\n&lt;/script&gt;\n</code></pre>\n\n<p>It has all kinds of different options for customizing the behavior you may want:</p>\n\n<p>For example:</p>\n\n<pre><code>&lt;script&gt;\n  new AlphaListNav(\'myList\', {\n    initLetter: \'A\',\n    includeAll: false,\n    includeNums: false,\n    removeDisabled: true,\n    //and many other options available..\n  });\n&lt;/script&gt;\n</code></pre>\n\n<p>The GitHub project is <a href="https://github.com/elliottprogrammer/alphaListNav.js" rel="nofollow noreferrer">here</a></p>\n\n<p>And a CodePen example is <a href="https://codepen.io/melliatto/pen/vwWjjj" rel="nofollow noreferrer">here</a> </p>\n\n<p>The AlphaListNav.js website &amp; documentation is <a href="https://elliottprogrammer.github.io/alphaListNav.js/" rel="nofollow noreferrer">here</a></p>\n'}]
['https://Stackoverflow.com/questions/16458', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/666/']