Halleynet Headspace

I have been working on a project recently that required me to build a multi level search feature, you know the kind of thing where on selecting the first item in a list of options, the next level becomes available.

One thing you really need to get this working is Ajax. You don’t want to be having full page reloads as each selection is made, wouldn’t it be cool to just update the next selection box?

Now no doubt there are many ways to skin a cat but to be honest

1)There are few (if any) out the box scripts on the web to do this that I could find

2) I am a great believer in not reinventing the wheel and KISS (Keep it Simple Stupid!)

3)Most purely javascript scripts I could find “cheated” in that they pulled down a predefined list of data to the browser and used client based scripts to sort and filter it. This is Ok I suppose in a static environment but its not terribly flexible for a dynamically driven site, and if you have a lot of data to be sorted, as potentially I do in my project,you are dumping the whole list for the user to ultimately choose one item. Better to send only whats needed.

For this reason, and for the reason that its handy and available in DW4 as it comes out the box, I decided to use Adobe’s Spry Javascript Framework. DW4 is a pretty expensive package but there is a free trial version for 30 days use if you want to use this, or if you are a student you can get the package (for non commercial use ) for much cheapness- relative to what it costs me!!!

There are a few frameworks out there, Spry, jQuery, Scriptaculous, prototype, but for me Spry was most accessible  as fundamentally I am a non Javascript developer and I have some experience of its use through other projects.

If you don’t have Spry now and you want to follow along, go to Adobe’s website and download the files. In DW4, it loads up the files you need as you use each function, but if you are not using DW4, feel free to dump the whole package on your server in some folder.

For this example I will use a directory called /spry but it can be anything you want.

If you are bandwidth constrained, you can get a minified version of the files too, this reduces the amount of code being sent to the browser, it does not make much odds on a quiet website, but in a busy case it might save you considerable bandwidth fees down the line.

So with the basis of this project set before you, get the bits you need here and next time I will show how I got the multi level search started.

My assumption is you know a little php to run a database query and know how to get that out the database into xml format. For this project i will be using static xml files.