Select 2 version 4.0 allow user to enter free text

Question

I am using the latest version of Select2: Select2 4.0.

I would like to allow users to enter free text. In other words if a user cannot find a option in the drop down (data returned by ajax), I want them to be able to 'select' whatever text they have typed in.

This is my markup:

<select class="required form-control" id="businessName" data-placeholder="Choose An Name" > </select> 

And this is the JavaScript that I am using to initialize Select2:

$("#businessName").select2({
    ajax: {
      url: "/register/namelookup",
      dataType: 'json',
      delay: 250,
      type: 'post',
      data: function (params) {
        return {
          businessName: params.term, // search term
          page: params.page
        };
      },
      processResults: function (data, page) {
        return {
          results: data.items
        };
      },
      cache: false
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 4,
    createSearchChoice:function(term, data) {
        if ( $(data).filter( function() {
          return this.text.localeCompare(term)===0;
        }).length===0) {
          return {id:term, text:term};
        }
    },
});

I added createSearchChoice but it doesn't work. I have looked at this answer as well but so far no luck.

Answer 1

This was a change in 4.0.0 that resulted from undocumented behaviour in 3.x. In 3.x, if you were using createSearchChoice you also should have been using tags (setting it to true or an empty array). This is because createSearchChoice and tags were tied together.

In 4.x, createSearchChoice was renamed to createTag because it was really creating the tag. This was documented in the 4.0.0-beta.2 release notes. Additionally, the second (also undocumented) parameter to createSearchChoice was never implemented - but you don't actually need it in this case.

So, with those two changes noted, the working code to allow for new options to be added by the user is

$("#businessName").select2({
    ajax: {
      url: "/register/namelookup",
      dataType: 'json',
      delay: 250,
      type: 'post',
      data: function (params) {
        return {
          businessName: params.term, // search term
          page: params.page
        };
      },
      processResults: function (data, page) {
        return {
          results: data.items
        };
      },
      cache: false
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 4,
    tags: true
});

Notice that I did not implement createTag, this is because the default implementation matched what your old createSearchChoice was trying to do. I did add tags: true though, because that is still required in order to make it work.

On top of that, you do have some invalid markup now that you have changed to a <select>.

<select class="required form-control" id="businessName" data-placeholder="Choose An Name" ></select>

The type attribute (previously set to hidden) is only required if you are using an <input /> and is not valid on a <select>. This shouldn't make any noticeable change to you.