Tips and Tricks – jQuery Select2 Plugin
Posted by Cassandra Wolff in Development, Tips and TricksWeb developers have the unique challenge of marrying coding logic and visual presentation to create an amazing user experience. Trying to find a balance between those two is pretty difficult, and it’s easy to follow one or the other down the rabbit hole. What’s a web developer to do?
I’ve always tried to go the “work smarter, not harder” route, and when it comes to balancing functionality and aesthetics, that usually means that I look around for plugins and open source projects that meet my needs. In the process of sprucing up an form, I came across jQuery Select2, and it quickly became one of my favorite plugins for form formatting. With minimal scripting and little modification, you get some pretty phenomenal results.
We’ve all encountered drop-down selection menus on web forms, and they usually look like this:
Those basic drop-downs meet a developer’s need for functionality, but they aren’t winning any beauty pageants. Beyond the pure aesthetic concerns, when a menu contains dozens (or hundreds) of selectable options, it becomes a little unwieldy. That’s why I was so excited to find Select2.
With Select2, you can turn the old, plain, boring-looking select boxes into beautiful, graceful and more-than-functional select widgets:
Not only is the overall presentation of the data improved, Select2 also includes an auto-complete box. A user can narrow down the results quickly ad easily, and if you’ve got some of those endlessly scrolling select boxes of country names or currencies, your users will absolutely notice the change (and love you for it).
What’s even sexier than the form facelift is that you can add the plugin to your form in a matter of minutes.
After we download Select2 and upload it to our box, we add our the jQuery library and scripts to the <head> of our document:
<script src="jquery.js" type="text/javascript"></script> <script src="select2.js" type="text/javascript"></script>
For the gorgeous styling, we’ll also add Select2′s included style sheet:
<link href="select2.css" rel="stylesheet"/>Before we close our <head> tag, we invoke the Select2 function:
<script> $(document).ready(function() { $("#selectPretty").select2(); }); </script>
At this point, Select2 is locked and load, and we just have to add the #selectPretty ID to the select element we want to improve:
<select id="selectPretty"> <option value="Option1">Option 1</option> <option value="Option2">Option 2</option> <option value="Option3">Option 3</option> <option value="Option4">Option 4</option> </select>
Notice: the selectPretty ID is what we defined when we invoked the Select2 function in our <head> tag.
With miniscule coding effort, we’ve made huge improvements to the presentation of our usually-boring select menu. It’s so easy to implement that even the most black-and-white coding-minded web developers can add some pizzazz to their next form without having to get wrapped up in styling!
-Cassandra
October 21st, 2012 at 10:27 pm
Its really cool, thanks a lot for the share.
October 23rd, 2012 at 8:38 am
Cassandra could you advice any e-book or book that covers Jquery with all aspects.
October 29th, 2012 at 8:58 am
Hi there! Like many programmers, I have a huge library full of programming books that I use often as reference. One of my favorites for jQuery is the jQuery Cookbook http://www.amazon.com/jQuery-Cookbook-Solutions-Examples-Developers/dp/0596159773/ref=sr_1_7?ie=UTF8&qid=1351519007&sr=8-7&keywords=jquery this has been one of my favorite references as it covers practical solutions, though it is hard to find one particular book that covers EVERYTHING, I think it’s best to learn from use case scenarios. Hope this helps!
November 27th, 2012 at 2:40 pm
[...] written several blogs detailing the use of different jQuery plugins (like Select2, LazyLoad and equalHeights), and in the process, I’ve noticed an increasing frustration among [...]
November 28th, 2012 at 8:41 am
Thank you very much! I always enjoy being able to assist any way I can. Also, if there’s any specific topics you’d like us to cover, we’re more than happy to accept feedback!
April 16th, 2013 at 8:56 pm
Very nice post and really help me
May 17th, 2013 at 4:41 am
I’m using Jquery select2 but it is very slow on larger number of lists.Can anyone help me out regarding this. How to make it work fast?