68

I attempted to use the "language.noMatches" option when initiating Select2 and its throwing an undefined function? How do I go about modifying that bit of text? I would like to include a html button that would add the input from the user if it wasn't found. I tried doing this as a function as well as plain text. I also removed all html to see if that was doing it. 

$('#search-select').select2({

   ...

   "language": {
       "noMatches": function(){
           return "No Results Found <a href='#' class='btn btn-danger'>Use it anyway</a>";
       }
   }
});

This was previously "formatNoMatches" in Select2 v3.5

Anthony Conklin
  • 681
  • 1
  • 5
  • 3
  • Due to a [current bug](https://github.com/select2/select2/issues/3202) in how translations work, you have to specify all of them under `language`. – Kevin Brown-Silva Mar 27 '15 at 22:03

4 Answers4

145

The option noMatches doesn't appear anywhere in the source code.

The actual option is named noResults. The working version of your example is:

$('#search-select').select2({

   ...

   "language": {
       "noResults": function(){
           return "No Results Found <a href='#' class='btn btn-danger'>Use it anyway</a>";
       }
   },
    escapeMarkup: function (markup) {
        return markup;
    }
});

You also need to override escapeMarkup, so the button appears correctly, as per this issue.

Mariano Dupont
  • 1,554
  • 1
  • 10
  • 8
48

Probably, you have to add the script for the language you want to use. Something like this:

<script src="select2/js/i18n/pt-BR.js" type="text/javascript"></script>

And then you can set the default language:

$(".select2").select2({
  "language": "pt-BR"
});
monteirobrena
  • 2,562
  • 1
  • 33
  • 45
  • Thank you for this nice and working solution. It should be added in the official select2 documentation! After some checks, the pt-BR.js can be located in any directory, and named in any manner, the important point is that at the beginning of the file, it returns `e.define("select2/i18n/pt-BR"...` to be recognized. – Edouard Thiel Aug 05 '16 at 09:37
  • if your app is multilanguage all you need to do is to import the script language you need and select2 will take care of the rest according to current language. – marsalal1014 Apr 04 '17 at 15:39
15

The option for select 2.5 seems formatNoMatches:

$('#search-select').select2({
  formatNoMatches: function () {
  return "No Results Found <a href='#' class='btn btn-danger'>Use it anyway</a>";
  }
});
monteirobrena
  • 2,562
  • 1
  • 33
  • 45
vishnumanohar
  • 671
  • 2
  • 8
  • 14
2

The best solution right now is to make use of formatNoMatches option.

It is clean and concise.

Usage: you can pass either a string, or a function which returns a String to formatNoMatches

Example:

$('#search-select').select2({
...
formatNoMatches: "Nothing found"
...
})

or

$('#search-select').select2({
...
formatNoMatches: function () { return "Nothing found"; }
...
})

Ref: https://select2.github.io/select2/

Arun Joseph
  • 2,736
  • 25
  • 35