Using a placeholder with Select2 in xPages

Select2 is a fantastic component that provides for a very nice alternative to the classic combo box.  While working with it this week I ran into an issue where I was unable to get the placeholder option to work.  Turns out you need to seed your values array with a null value or else the placeholder won’t display.

Using this select2 initialization code:

//Initialize Select2 Drop Down
$(‘.select2’).select2( {
placeholder: “Select value”,
allowClear: true,
minimumResultsForSearch:-1
})

This works:

var arr = new Array(“”);
var values = @DbColumn()  \\Insert your own code here
var list = arr.concat(values);
return list;

This does not work:

var values = @DbColumn()  \\Insert your own code here
return values;

A subtle but important distinction.  Thanks to Johnny Oldenberger for this tip.  I found this helpful information on one of his blog posts