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.