July 05, 2008: All systems go, accepting new clients.
MultiSelect / "FaceBook" List Redux
by Loren Johnson on Friday, February 29, 2008
Multi-select controls suck
I’ve always had a thing for multi-select controls. In particular the thing I’ve had is that their aren’t many decent ones out there and the ol’ HTML multi-select ctrl-click doesn’t really cut it in the usability circles, or real life for that matter.
A better selector: Proto!MultiSelect 0.2
So this week when I was once again tasked with a bunch of multiple select requirements on a client’s admin app I’ve been developing, I buckled and once again went on the long search with a hope and a prayer that something new and better had arisen. Sure enough! Just a couple weeks ago the good folks at InteRiders releases this:
...and then a week later, this:
The later one was pretty close to what I was looking with my multiple select requirements which were selecting multiple authors, tags and regions for content. This was somewhat fresh code and in somewhat of an early state, or at least for my purposes it was lacking in some key functionality (with no disrespect to InteRider’s effort—I’m very thankful for it).
A better better selector
So before I knew what hit me I’d jumped neck deep in and spent a good amount of my week going over this code and making it into the thing that fit the bill for all my requirements:
- Now you can use more than one of these buggers on a page as I’ve moved the class “options” variables in to initialize and changed how the id’s generate such that they will be unique for each instance on the page.
- I’ve removed the auto-Ajax polling of the data source with every query and moved the Ajax request up top in initialize so the data is only loaded once each page load. This change may not suit everyone, in particular if you have an enormous dataset you’re not going to like have to load all of that data at once…
- Added the option to allow new values (“newValues: false” is set as the default) by typing the value and pressing comma which will put the new value in with the rest of the value boxes already selected. The value of the input field will now include this value as well. This is necessary and works great for the case of tagging…
- Now the value of the final value of the input box gets updated anytime a new value is added or removed. I don’t see any reason this shouldn’t be the case going forward. Without this I had to attach an onclick event to my submit button to run fu.update(); for all instances of the control on the page.
- I’ve moved both the TextboxList and FacebookList classes into a single file for clarity and convienance
- Misc. other clean-ups—there are more notes in the code
Hope this is of help to someone grappling with this promising little select control this week. (InteRider folks—feel free to merge any of these changes into your version.)
Try and buy (err.. take)
UPDATE:
Zuriel Barron has taken this from where I left off and fixed a couple of clear bugs in what I’d done, namely that this was breaking in IE and Safari. It’s now working in Safari (and we assume IE). This version is now what’s posted here. Here are his notes:
== Zuriel Barron, severelimitation.com -- 3/1/08 == bug fix: fixed bug where it was not loading initial list values bug fix: new values are not added into the autocomplete list upon removal bug fix: improved browser compatibility (Safari, IE)
Download facebooklist.js