Selectik - Stylish Selects

Web designers love to style standard form elements. Then we have to implement these elements to us - the maker-up.

After dozens of projects, where I had to use third-party solutions, I was faced with the constant inventions of crutches, the lack of flexibility of ready-made plug-ins, the speed of generation.

Naturally, after all this, I decided to invent my bicycle.
')
The sample is designed without additional images using CSS3. Demo page with sandbox here .

Bicycle again?

For quite a long time I finished writing, created crutches when using ready-made plug-ins. The last straw was the fact that when writing Unit-tests, testers try to reach out, first of all, to the standard select, but this does not work, since most of the plug-ins that I used hide the standard select through “display = none”.

I also wanted to have an easy solution, quick generation (in IE, with a large number of selections on the page), working in the same way as the original selection.

The plug-ins that I used most often were repelled by events related to the already created structure of the stylized select. In the case of Selectik, the events are mostly hung on the original select.

The library decided to use jQuery for two reasons:

• Now most of the created sites use this library.
• On native JavaScript, creation would take much longer and the amount of code going off-scale.

And so, what exactly is Selectik?

In the minify version, the weight of the script file is only 5.2 Kb. And with an additional plug-in (mouse wheel scrolling) and CSS in the demo example, 12.8 Kb. Gzip 2.1 kb / 4.7 kb respectively.

Supported browsers: IE7 +, latest versions of Chrome, Safari, Firefox.

Features currently implemented:

• up / down and Enter keys
• stylized scrolling
• mouse wheel scroll
• search for letters
• automatically adjusts the width
• "Smart positioning"
• reacts to tab transition

Parameters that can be used:

• assignment of the list width (in the standard case, the width of the original list is calculated)
• maximum number of visible elements
• scroll type selection — stylized or standard
• animation speed of opening and closing list

API:

• update stylized list
• open / close list
• assign new active item
• dynamic width change
• enable / disable list

In future

• mobile support
• your wishes in the comments

Project on github . Demo page with sandbox here .
I would be grateful if you can describe the errors / problems in the issue .

update
As znortil Connor , jQuery version 1.7+ is required due to the use of .on (). Most likely to be replaced by .bind ().

update 2
Thank you all for the comments and bugs. Within a week will be done.