Select2 - What the HTML Select tag wishes it could be

A jQuery based replacement for select boxes

By  

The humble dropdown box. It’s everywhere and it’s an essential component of HTML forms. It’s also not very good. It’s useful in cases where there are a small number of options to choose from and useless when there are a large number of options. People have been trying to improve the functionality of the dropdown box with JavaScript for years, the best and most complete solution I’ve seen yet is the Select2 library.

Select2 is a jQuery based replacement for select boxes. It gives you just about everything you’ve ever wanted in a dropdown including type-ahead searching, remote data sets, infinite scrolling, images, tokenizing, and a lot more. It provides a robust set of configuration options and event triggers for every action you’d need to tap into.

An important thing to note is that Select2 is a select box replacement. While it does provide some quick improvements to your standard HTML select tag (type-ahead searching), the real exciting stuff happens when you allow it to completely replace the field. Due to the limitations of an HTML select tag, it’s necessary to use other tags and DOM elements to emulate the select list in order to gain more capabilities. For example, using Select2 you can style your drop down results any way you like, such as a movie list:

This is done by providing a resultFormatter callback function in which you can define any HTML you like. It’s beyond the basics but it’s very powerful and can help you achieve whatever you’re looking to do.

It’s also a major improvement to Multi-Select boxes. Using Select2 for multi-select, you can automatically tokenize multiple selections to improve the user experience. This lets a user continuously type, search, and choose multiple results in one shot rather than having to explain how to control click and highlight many plain elements. It even gives them the ability to click and delete selected items from the list, and even drag and drop to reorder them (with the jQuery UI sortable plugin).

This is one of those libraries that once you’ve used once you go back to for just about all of your projects. It’s done extremely well and is really flexible. I’ve yet to run into a scenario where I wanted to accomplish something that I couldn’t make happen with Select2. It’s free, it’s open source, and it will improve your application anywhere you need a dropdown. Check out the examples and documentation and grab it from GitHub to get started.

Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Spotlight on ...
Online Training

    Upgrade your skills and earn higher pay

    Readers to share their best tips for maximizing training dollars and getting the most out self-directed learning. Here’s what they said.

     

    Learn more

Answers - Powered by ITworld

ITworld Answers helps you solve problems and share expertise. Ask a question or take a crack at answering the new questions below.

Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Ask a Question