Replacing standard select using Mootools

Sometimes you need to replace the standard HTML element with your own.
This is usually necessary if the designer’s imagination has played out and he has drawn a “customized” select and insists that it be implemented as he wanted. Well, we must do it.

A little background.

Once I needed to customize select. I use mootools, so I immediately went looking for a plug-in to replace select'a - what if someone had already written? Indeed found a few. Began to understand. All the plugins I looked at turned out to be complete nonsense - they did not behave like a standard select. I threw them in the trash and decided to write my own plugin that would completely repeat the behavior of the standard select'a.

Let's now see how standard select behaves:

• You can focus on it
• You can select without opening select, but using the arrow keys
• You can close open select by pressing esc
• You can select an option in an open select by pressing enter
• You can remove the focus from select by pressing tab.
• If there are many options in select, scrolling appears
• Select'a has an onchange event (there are others, but this is the most important)
• In the standard select, you can dial the first letter and will focus immediately on the element

Closer to the point

I will not give here the code of what happened - it does not need anything. Better download and see for yourself, or check out the demo . But I will talk about what happened.

What happened

So, get your "custom" selectbox. And that's what he can do:

• Standard behavior like native select
• Replaces the specified select with itself.
• He has already 4 events: onChange, onSelect, onShow, onHide
• Supports themes
• Has clear CSS
• It has a simple DOM model.
• Easy to use
• It has a rebuild () method, with which you can rebuild the “custom” select box if there are changes in the native select
• JS code weighs about 4 kilobytes in compressed form and 7.5 in uncompressed

What are the problems at the moment?

1. You can not change the type of scroll bar that appears in the select box with a large number of options
2. So far, the selectbox can only fall down, and should fall up, if there is not enough space below
3. There is no multiple mode
4. Timeout when spinning, so that the option when the mouse is moved while scrolling is not immediately highlighted (for a native select, this is exactly the case)
5. Does not change the appearance when you click
6. If there is a scroll, it should automatically scroll when selecting items.
7. If you click on the menu item, then remove the mouse, then when you press Enter, this element should be selected

I will try to fix all these problems in the following releases.
')
It was tested only in IE 7, Firefox 3.0.1, Google Chrome (look at somebody, in Opera and IE6 how?)

If something is missed - report. And, of course, report found bugs, I will correct.

Download CustomSelect
View demo