Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you modify "No Results Found" language in Select2 v4.0

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

like image 344
Anthony Conklin Avatar asked Mar 27 '15 17:03

Anthony Conklin


People also ask

How do I set Select2 values?

To set selected value of jQuery Select2 with JavaScript, we call val and then trigger . Then we set its value with val to the option with value 0. Finally, we call trigger with 'change' to update the drop down to show the value we set.

How do I add options in Select2?

New options can be added to a Select2 control programmatically by creating a new Javascript Option object and appending it to the control: var data = { id: 1, text: 'Barn owl' }; var newOption = new Option(data. text, data.id, false, false); $('#mySelect2'). append(newOption).

How do I make Select2 empty?

In order to clear the selection of those values which are selected using a Select2 drop down,we can use the empty() function. The dropdown can be reset using Jquery. $("#select2_example"). empty();

How do you add a Select2 to a dynamic element?

Select2 jQuery plugin is easy to add on the <select > element. Need to call the select2() method on the selector to initialize. If you adding select2 on a class or select element and when you add an element dynamically then select2 is not initialized on that element.


1 Answers

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.

like image 56
Mariano Dupont Avatar answered Sep 21 '22 16:09

Mariano Dupont