The Problem
If you are like just about anyone in our office, you have probably at one time or another had an HTML <select> element completely ruin your otherwise perfect website. They are practically impossible to style, and render differently in different browsers.
How to fix it
Today I ran across a jQuery plugin called Select2 that converts those boring <select> lists into styleable elements, that mimic the behavior of select lists, along with some additional features, such as on-the-fly list filtering based on what you type in.
Get Started
It’s really easy to get started using it. First, download the files and include the javascript and css files in your project. Make sure you are loading the javascript file after including jQuery, to make sure you don’t get any jQuery is not defined errors! To replace all the <select> elements on your page with the select2 version, just add the following script
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('select').select2();
});
</script>
It’s that easy. This will replace all the <select> elements on the page with the jQuery select2 versions of them as soon as the page completes loading.
Want to know more?
There are tons more features that this thing supports, such as remotely loading data for the list, infinite scrolling, and custom styling each list entry. You can read more about the additional features on the github project page.