[select2 4.0.0-beta3] Display a link to add a new item if no results are found

[ianlamb77]

In previous versions, the formatNoMatches option could be used to provide a link to add a new item if no matches were found:

formatNoMatches: function(term) {
  return "<a href='add_item?term="+term+"' class='new_item'>Add New Item</a>";
 }

However when trying to replicate this using 4.0-beta3's new languages.noResults function:

language: {
  noResults: function() {
    return "<a href='some_URL' class='new_item'>Add New Item</a>";
 }
}

the raw unformatted string appears in the dropdown, rather than a link. Manually creating a DOM object in the function and returning that also doesn't work, though I wouldn't really expect it to. Is there another way to achieve this functionality in 4.0? Thanks.

[kevin-brown]

I've updated the code to allow for HTML to be passed back from the language options, but keep in mind that it is passed through escapeMarkup.

You can get around this by building it out as a jQuery object and passing that back, or by overriding escapeMarkup to be a no-op.

[ianlamb77]

Awesome, thanks for quick response!

[JayatiTehri]

Hey ,
Can you pls explain how can I customise ' No results found' to a link like ' Add Item'?

[KarlKl]

@JayatiTehri use language->noResults and escapeMarkup options to customice the no result text. ;-)

$('select').select2({
     language: {
             noResults: function() {
                 return "<a href='http://google.com'>Add</a>";
            }
     },
    escapeMarkup: function (markup) {
        return markup;
    }
});

[elbouillon]

Where can I found documentation about those functions? I didn't find anything in the main website.

[KarlKl]

The general docu for Select2 can be found here.
The language keyword: Internationalization

The code I provided is just a "workaround". It is a combination of a customized "No results" text and the overridden escapeMarkup function to use HTML in the language strings.

[JNajera]

Its any workaround to provide a link to add a new item on the top of the results? I need a fixed option so its always available to the user, but I couldn't figure out how to do it. Im using a custom dataAdapter to set some records when the user open the select. The workaround proposed here its a nice option, but it not work at all for me.

[hassanrehman]

still not working .. can't get the term entered to use in the formatting of the text

[icrm-amusienko]

language: { noResults: function (term) { return '<div>' + term + '</dev>' } }
term is undefined always.
Please fix it ASAP.

[KarlKl]

@icrm-amusienko : Please open a new issue. This issue has been closed a year ago...

[wpangestu]

@icrm-amusienko this is how i showing term

language: { 
  noResults: function () {
    var term = event.target.value;
    return '<a href="#">add item ' + term + '</a>' 
  },
  escapeMarkup: function (markup) {
        return markup;
  }
}