See Select Box Factory 2.0 for jQuery
Download v 1.0
Here, the factory has produced a multiple-select box, with "sifting" tool attached. Try searching for one of the items in the list, or typing a letter in there. Next to it is the exact same list rendered as a dropdown (takes about 5 seconds to make this transition).
Why not cram some images in there? Here are images representing ranges, so search for "upper" for upper range, and see what happens:
Or what if we took the first two examples, but this time made the first list a "select-one" list, but wanted it to be open? And maybe we don't want the eraser in the dropdown on the right... and for some reason we also want a count at the bottom.
Select-ones with toggles, like on the right side are one of the weirdest variations and I recommend not to use them, but they are there. Because they are not dropdowns, the selections do not cause the toggler to "snap" back. To do this, you make it a "dropdown".
Next is an example of a select box whose elements were not found on the page, but rather in the definition. Inside the JSON object called "definition" is a child JSON object called "choices". The order to add items was specified as ascending (descending is also possible).
The code won't sort a list for you - it assumes you know the order. Try adding or removing items below, and have a look at the code in the zip file for more. Remove does remove a predefined item, but its nothing to make this remove selected items or based on a passed-in value.
But wait... its gets even more interesting. I've added the ability to show and toggle a certain number of states. I call this a heatmap, and it has many uses. Let's say you retrieve items where some are errors, some are warnings and some are info messages. Not only can you filter on those states, you get convenience buttons too. (unfortunately, there is not a lot of room for the buttons to have text). The states are numeric (0-5), so the buttons are nice when the users don't know the states - its more visual than anything.
All you have to do is add a state property to your items as an attribute, and boom, the code crawls over your items and figures out all the states on its own. It may be tough to see the selections here, but its up to you to skin these the way that makes sense to you. Add any colors that you want. Whether to show the convenience buttons or not is up to you. These work up to a point - since your dropdown can only be so wide. The code does its best to fit them in based on your css styles. For now, the states are numeric no matter what.
Try this: in the box on the right, first click the yellow button, then type "J" in the sift box. Its a filter within a filter.
Then try this: Click the eraser to clear the box, then click the yellow button again. Except this time, in the box, add "|v" (without quotes). The box should read 2|v. See what happens. (| pipe means "or")
Above you see some of the many variations that are possible with the select box factory. You see a multiple-select box opened with a max size of 6, that is capable of using the sift tool. Here are some ways to test its capabilities.
- Try using control key to choose items like you might in a normal select box. Do this on the select-multiple boxes.
- Use the shift key to do the same.
- Click the eraser and see what happens.
- Type something in the text box and see what happens.
- Try typing the letter I while focused in the box and see what happens.
Download v 1.0
Results of performance testing
About the tool in general
- Uses divs instead of options, which is why the potential for extension is nearly unlimited.
- Does whatever a dropdown can do, but goes far beyond.
- It is easy to call up a dropdown, assuming you have a div on your page that you are using as a dropdown.
- All variations can fit a container, whose style you must supply in css, or it can live by itself, using itself as a container.
- All variations are relative positioning, but work great positioned absolutely, or stacked on top of each other with z-index. This is up to your css and design, but they fit well. The above examples have a lot of whitespace because I am showing them inside iframes with the iframe border turned to no/0.
- All variations can be enabled and disabled.
- All variations are very, very easy to style in css. Just edit selects.css and you are done. You can even style the scrollbars if your browser supports it. (I suppose the ultimate incarnation would not even have that overflow scrollbar, but its not as easy as it looks to make one work without using overflow this way - its not something I am going to work on.)
There are three major variations to this..
- works just like a standard javacript dropdown
- can take images, which dropdowns can't do.
- can show as many items before rendering a scrollbar as you want.
- has a neat eraser icon so you can "undo" your selections. normal dropdowns don't do this, but I think they should.
- It will allow you to show it opened or closed by default, which dropdowns today can't do. This is neat, because you can "show your users" an interface you want them to touch on the onset.
- All variations can show a count of what is selected, but only the toggle versions (select one, and dropdown) will show you in text form what that select is at the top.
- All variations will seek out and highlight the first item in a list based on the key you press. (although i don't have this working in safari yet).
- My favorite variation, shown above.
- You can put a sift tool on top of it for nice searching.
- You can put no toggle or sift on it, so it looks like a normal dropdown.
- It uses spreadsheet style selections.
- very much like setting a select box to have a size of 1, this variation would be less common but has a ton of uses.
- This isn't a dropdown, but can act like one. The biggest difference between this and a dropdown is that a dropdown snaps back and this one stays open.
Needless to say, there are a wide variety of ways to use these dropdowns and I hope people find them intuitive to use. They are part of a more extensive "ui factory class" that I have created to plug into mooTools. This select box factory is enough for now.
(It expects mooTools v.1.11 but honestly, the only real neat effect is a toggle() so this can easily be ported to mooTools v1.2).
I will be fixing bugs and enhancing performance in the weeks to come to make them even faster.