We help IT Professionals succeed at work.
Get Started

Coldfusion + Javascript Question about Lists

CFbubu
CFbubu asked
on
594 Views
Last Modified: 2012-08-15
Hi Folks,

I have a query below that outputs a list of cities.

<UL id="list">
<cfoutput query="getresults" group="City_ID" >

<LI><a href="somepage.cfm?City_ID=#City_ID#">#Cityname#</a></LI>

 </cfoutput>

</UL>

[RESULT]

Amstad
Alron
Adderson
Belleview
Banneris
Brentwood
Charstone
Cimbran
..
...
...
Zanker


I am wondering if if were possible to use javascript combined such that the output will look like that below:

[Desired Output]
A
B
C
..
..
Z

The desired output above shows the list like a simple alphabatized list, and when the user clicks on the letter A, the list will 'expand' and will show all the cities starting with 'A' as seen below:

A
Amstad
Alron
Adderson

B
C
D
.
..
Z

I have searched high and low around the internet and saw someone use a javascript code like such below to make an alphabatized list.....but I am not familiar with javascript and cannot seem to get it to work. In addition, I am hoping to make it work as an 'expanding' list as examplified above.

It would be awesome if someone could help me make this a reality! Thanks so much!

[Javascript code below]


var list = { letters: [] };    //object to collect the li elements and a list of initial letters
$("#list").children("li").each(function(){
    var itmLetter = $(this).text().substring(0,1).toUpperCase();
    if (!(itmLetter in list)) {
        list[itmLetter] = [];
        list.letters.push(itmLetter);
    }
    list[itmLetter].push($(this));    //add li element to the letter's array in the list object
});
 
list.letters.sort();    //sort all available letters to iterate over them
$.each(list.letters, function(i, letter){
    list[letter].sort(function(a, b) {
        return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());    //sort li elements of one letter
    });
    var ul = $("<ul/>");    //create new dom element and add li elements
    $.each(list[letter], function(idx, itm){
        ul.append(itm);
    });
    $("#list").append($("<li/>").append($("<a/>").attr("name", letter.toLowerCase()).addClass("title").html(letter)).append(ul));    //add the list to a new li and to #list ul
});
Comment
Watch Question
Project Architect
CERTIFIED EXPERT
Commented:
This problem has been solved!
Unlock 3 Answers and 4 Comments.
See Answers
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE