Choices Choices Choices

Creating unique and painless layouts for users becomes integral to your application’s usage with its customers. Leveraging front end tools can help achieve a more pleasant experience not only for users, but the developer as well. Just to be clear, this is not going to be a post about UX/Design Patterns. Mainly a focus on a jQuery library, Select2.

You most likely have scrolled through endless drop down options in search of the proper value, sometimes glancing over the very selection you want. I’ve encountered some drop downs that extended beyond the window of my browser. It looks painful, and feels equally painful.

In modern applications, drop down menus hold database values for Users to select from. Loading them up on the server and iterating and laying them out on the front end. Within the ThreatSim platform, we utilize the Rails Framework. Here is what using a basic drop down in Rails looks like.

<% @states.each do |state| %>
  <div id="mySelect">
    <select id="<%= state.id%>">
        <option value="<%= state.name%>"> <%= state.name %></option>
    </select>
  </div>

Why Select2?

Select2 allows you as the developer to transform your select box into something more powerful, giving your User the ability to search for values within the drop down.

Pretty powerful stuff. But how does it all work?

First add the necessary Select2 files into your project, then…

  $("#mySelect").select2();

That is all it takes to get started!

Options

But that is not all. Select2 comes with a multitude of options to add to your custom select2 box. You have options for placeholder values, minimum character input for searches, templating, and more. One of my favorites is the multiple select feature.

To work with options you just need to add these properties to your select2 initialization.

  $("#mySelect").select2({
    multiple: true // select multiple options from the drop down
  });

What happens when your drop down starts becoming too cluttered, or you need to update your select box with new values based on User interactions? Well, Select2 comes with the ability to load remote data with Ajax.

Remote Data

We recently started to use the load remote data feature, and it has been pretty great!

$('#mySelect').select2({
  placeholder: 'Type to search for a State',
  multiple: 'multiple',
  minimumInputLength: 1,
  ajax: {
    url: '/api/states',
    dataType: 'json',
    data: function(query) {
      return {
        query: query
      };
    },
    results: function(data) {
      var results;
      results = [];
      $.each(data, function(index, item) {
        return results.push({
          id: item.id,
          text: item.name
        });
      });
      return {
        results: results
      };
    }
  }
});

The one trick is returning an id and text for the select box. That is about it! A breeze to use and develop with! Check out the Docs for more info on using select2 and all the options! Select2.

Now go select all the things!