Archive for the ‘Select2’ category

Select2 3.2 Add Custom Clickable item to dropdown.

February 15th, 2013

There are a few folks asking how they can insert something to the bottom of the Select2 javascript control and I have came up with a solution as shown below in my jsfiddle.  All I am doing is making use of the query function that select2 provides as outlined here: Select2 Documentation.  Also take note of what I am returning in the results, basically I am making use of select2’s ability to create grouped headers and use a “children” parameter to show that list.  All I had to do was add in whatever I wanted my bottom link to say and voila, I have an entry to allow the user to click on and perform an action.

NOTE:  Newer versions > 3.2 do not show html as output, the newer version of the control is overriding the output somehow and just rendering the text, I was too lazy to figure out what is going on so I just thought I would give a heads up.

UPDATE:  The Select2 (currently at 3.4.5) control has been updated with the escapeMarkup parameter, simply add a line like this to your options of your select2 element:  “escapeMarkup: function (m) { return m; }” and you can have clickable links back in your dropdown.

Here is the pull request for it:

Create a dynamic and searchable optgroup with select2

January 16th, 2013

If you are writing a web app, you may or may not know about the Select2 control found HERE. I posted about it a few months ago here: and I was going to give you an update with an example of how to use it with an underscore template to create a searchable select with grouping. This will be useful in a project I am working on and I thought I would share. I have attached my jsFiddle below, the creator has an example of templating you can find there but I couldn’t really find an example of how to load the data in dynamically and you CANNOT use the ajax function in it with a select, so basically I create the entire select up front then style it.

A very nice tool to display drop down data on your website

September 18th, 2012

I had a requirement on a project I have been working on to provide a search tool that can look up live data and filter it based on what you type through an auto-complete function.  I have been through 3 iterations, here is what I have used to this point:

The first one I used was the JQuery ComboGrid found HERE.  This tool was a good first run, it provides auto-complete and will display a grid that attaches to your INPUT element and allows you to display columns of data and will populate the field with whatever you select.  The problems I had with it is that it doesn’t look at all on an IPad and formatting it was somewhat of a nightmare, so I had to ditch this one.

Then I came across the Chosen control found HERE.  This control was a better step in that it does a very good job of formatting a SELECT element with auto-complete and filtering of the results.  The problems I ran into with this control was that it does some weird things on the IPad and it had no native function to hook into live data on a server, so I had to continue my search.

I have finally landed on the Select2 control, found HERE, so far this control does everything I need, it provides an ajax: function that allows you to hook right into your web call and even provides hooks for formatting the results and CSS file inclusion.   A word of advice if you are using the ajax: function, make sure you are using an INPUT element instead of SELECT and that your results include a lowercase id and text property, the control uses the id for searching, and the text property to display the results.  Happy coding!!