How to implement dynamic taxonomy navigation / hierarchical drop down list using ajax/jQuery?

Question

I'd like to provide my users a way to navigate a taxonomy by successively drill down ono drop down lists.

A simple example would be something like ebay's categories. Say you pick the category "Clothing", the next drop down list would display all the sub-categories under Clothing such as "Shorts", "Pants", "Coats" etc. And this can go on arbitrarily deep.

I looked at the jQuery plug-in mcDropdown. The interface looks really nice. However it seems to require the entire taxonomy to be passed to the plug-in in one go. Other plug-ins I looked at also have this limitation.

I need somethinig that retrieves & displays data dynamically. So after the user picks "Clothing", the UI sends that selection back to the server, which then sends back a list of sub-categories of "Clothing", so on and so forth.

Is there any jQuery plug-in that does that? Or what would it take to implement that in plain jQuery?

I'd prefer jQuery, but other frameworks would be fine too.

Answer 1

I do not know of some plugin for this so here is a breakdown of the process..

Should not take long to implement.. (i do not attempt it as it relies on your server-side technology and preference between html/xml/json for the ajax call returns..)

1. jquery Ajax call to bring 1st level data
2. create dropdown with jquery and add fetched data to it
3. List item use jquery .data() method on the new dropdown a autoincrementing counter (will be used to remove all later instances when you change something in a dropdown that is not the last)
4. bind a handler to the .change() event of the new dropdown that will repeat the entire process, passing as parameter to the ajax call the id of the selection (should create the logic once and just invoke it manually the first time..)
5. in the same handler, check if the counter of the select box is not the last one, find all dropdowns and remove those with counter greater than this dropdown..
6. add the new dropdown in the DOM..

I hope it makes some sense..

Answer 2

I once wrote a plugin that might be what you're looking for; if not, at least it should give you a good place to start coding from (hopefully :)