How to add Custom message into Select2

This tutorial will illustrate to you, how to add a user-defined message into the select2 control. I am using the jQuery Select2 plugin.

The Default message of select2 is ‘No matches found’. Sometimes we need to add a custom message for select2. I will share the script for the set custom message as well as fire an event on this message.

Also checkout other tutorials of select2,

• Part 1 – How to Integrate Chosen in HTML dropdown list
• Part 2 – How to Select All element of SELECT2
• Part 3 – How to add Custom message into Select2

Step 1: We will add custom option for the default option.

html += "Add New Number";

The above code will show you the ‘Add New Number’ text when you will render select2.

Step 2: Now we will add condition to show the above option into the select2 dropdown list, when the search string does not found in select2, then we will show ‘Add New Number’ instead of the default message.

matcher: function(term, text) {
   return text === 'Add New Number' || $.fn.select2.defaults.matcher.apply(this, arguments);
}

Step 3: Remove this option at the time of select2 binding.

matcher: function(term, text) {
  return text === 'Add New Number' || $.fn.select2.defaults.matcher.apply(this, arguments);
}

So ‘Add New Number’ will not show when the first time select2 render, it will show when the matching character does not find.

sortResults: function(results) {
 if (results.length > 1) results.pop();
 return results;
}

Step 4: The Full code of select2 with a custom option.

jQuery("#selectId").select2({
 width: 'element',
 matcher: function(term, text) {
  return text === 'Add New Number' || $.fn.select2.defaults.matcher.apply(this, arguments);
    },
 sortResults: function(results) {
    if (results.length > 1) results.pop();
  return results;
 }
});

Step 5: Result.

Demo & Download Source Code