Close the select on click

Beautified Select v1.1

Changelog

• Added the possibility to close the select by clicking on the title. It's basically a toggle feature.
• Fixed a bug on Google Chrome (let's face it, because they just won't go standard. 👎 )

First stable release for this plugin.

BeautifiedSelect initial release

BeautifiedSelect finally made it to the v1.0 release state. It should now be stable enough to be used in production.

A quick word of introduction

If you didn't take time to read the readme for this project, please note that it has been built with the idea of providing a plugin that will cover most users in the world (more than 97% when this release note is being written) but will drop the remaining 3% to provide a much better experience to all others. This is why this plugin will not work on IE10- or iOS9-. This is intended and I won't provide support for archaic/unused browsers.

The idea was also for this plugin to be usable by people who do not know a line of JavaScript.
Finally, I wanted this plugin to be friendly with all other plugins, this means if you do not put your <select> in a <beautified-select> custom tag, nothing will happen, it won't bother you and you can use it only on one select in your entire website if you like. Nothing else will break. I promise. If it does please open an issue ASAP providing a clear description of what happened and how.

Features to be expected in this release

• Creation of a fully beautified and functional dropdown system. BeautifiedSelect has been built with the idea of using very minimalist DOM and as few HTML nodes as possible.
• Respect of the HTML standard regarding <select> tag. This plugin aims to mimic as closely as possible the official standard and to provide some cool enhancements.
• Full mirroring of vanilla events: You can basically just add listeners to the <select> tag and everything will work just like if you didn't use this plugin.
• Full support of keyboard navigation: The plugin should be fully usable using only keyboard navigation. As this has been a very recent feature please report any bug you can find.
• Full support for microdata (if you have no idea what this is please see Schema.org). Microdata are handled in a very specific way that I found to be the most acceptable: They are removed from the <select> tag and added to the corresponding node on the BeautifiedSelect. As this is based purely on my opinion, feel free to open an issue about this so we can find better ways to handle microdata.
• Autocompletion: This feature does not exist natively but for very large select, I found it interesting to provide an ergonomic feature to search values inside the select.
• Placeholder: Native HTML selects do not accept the HTML placeholder attribute, so you will need to use the data-placeholder instead. Please refer to the readme or wiki to learn how to use this feature.
• Basic CSS: A basic stylesheet is provided with this plugin so it can work. You can edit it as much as you want to make it look exactly as you want but keep it mind this plugin is based on display and CSS so you may break the plugin if you remove too many rules.