Expanding Multiple Select List with Search Filter

A short while ago I wrote a elasticMultipleSelect class that allowed you to set a fixed width on a multiple select list via css to maintain the general design of the page and then, when the select list receives the focus, it expands out horizontally to the width of the widest (longest) option.

I did this initially to a clients specific requests however the final brief was rather more complicated. They also needed be able to search through the options as the user typed to filter out the non-matching options.

Of course I suggested that this would be best done with a simple ajax list that retrieved the matches as the user typed but for varios reasons this was not viable, mainly due to the fact that they also wanted to be able to use the default multiple select list functions. To make matters worse, it *had* to work on ie6!

This task turned out to be quite a challenge.
I initally created a filter for the original select list and had a decent working version that used mootools (what else?) to hide and show the list options using hide() and show(). I thought I had it until I got to the browser testing stage (I normally do initial testing in Firefox) – in IE it failed completely (all versions). It turns out that you *can’t* hide select list elements on IE by setting the display:none (which is basically what mootools hide() does) – so that was that idea down the drain.

I also tried versions that completely hid the original select list and replaced it with an unordered list but the client insisted on being able to use the default select list if desired by the user.

However, not one to give ip easily, I eventually came up with the right solution that combined all the clients needs.
The result is a mootools class that applies the expansion to the select list but also, when it gets the focus, it adds a text field where the user can, if they so desire, type the name of the option/s that they are looking for. As they type, the code searches through an array of elements created from the original select list and shows just the matching options. The more the user types, the less options are shown as the filter narrows down the results.

Once the user sees the option/s that they are looking for they can click on them and, apart from adding a “selected” style to that option, the original select list, which is temporarily hidden whilst the filter is being used, is also updated with the selected option. Clicking on the same option again also de-selects it from the hidden select list.

Finally, once the user has finised with the filter, there is a “close” button that hides the filtered list, resets the text field and shows the original select list once again, now with it’s updated selected options.

There are a couple of other features hidden away but I will leave those for you to find 😉

I have packed all this into one large class – I know, I should split it up into several smaller ones but I haven’t yet got my head round that…. I’m working on it 🙂

SEE DEMO

( To keep this post simple, I have shown the mootools class code in the demo page)