Mootools Multiple Select List Modal Window Filter

Let’s face it, Multiple Select Lists are not the best of HTML form fields, not least because you have no means of finding the option that you want quickly.  OK, you can type the first letter of the option you want but that is it, it will help you get to the start of all the options starting with the letter “T” but not much else.  This is why I needed to create a Multiple Select List Filter that would allow the user to type in the text and the non-matching options will be filtered out, reducing the list to just the possible matches.  This is really handy when you have lists of 100’s of options!

In January I wrote a post about my Expanding Multiple Select List with Search Filter which, as the title suggests manipulated a select list by making it expand when it got the focus and at the same time added a search box so that you could filter the list items.

The filter worked by laying an unordered list of the select list items, which could be easily manipulated by the code, over the original select list and then removing it when the user finished using the filter.

All went well until the client that I developed it for inserted it into their “live” code.  The code worked fine expect for the fact that they had a lot of multiple select lists on the page and things got rather messy and confusing.

So, we decided that I needed to develop it further, this time I decided to used a Modal Window to show the filter.

See Demo
This was actually a fairly straightforward process.
So as not to reinvent the wheel, I took  Zohar Arad’s original Mootools MooBox modal window as a starting point for my needs.  I choose this one as, of the ones that I looked at, it seemed to be the easiest to manipulate for my needs.  I actually stripped it down quite a bit and deliberately removed all the “effects” such as fading, resizing, dragging etc. so as to make it as fast as possible.  I also opted to take advantage of some CSS3 styles to achieve the rounded corners and shadows.  For those of you viewing this in Internet Explorar, you will see it without the effects – you should try Firefox, Opera or Safari 😉

I also took the opportunity to basically start again with the filter code.  As with the previous version this is all written using Mootools Javascript library (what else 🙂 ), however I have tried to further optimize this version by using Element Delegation for the events and “storing” the option values for checking in the filter rather than having to “read” them each time.

It is now all done and the client has been using it now for the last few months with apparently no problems 🙂
So, I thought that it was time to share the code (this time with a download link).  Feel free to take a peek and use it if you find it useful.

Let me know what you think.