Select2 4.0.0标签功能异常：无法Ajax获取标签及initSelection报错求助

Hey there, let’s work through your Select2 4.0 issues step by step—you’re hitting two key problems: the removed initSelection method (causing that "No select2/compat/initSelection" error) and broken Ajax tag suggestions. Here’s how to fix both and update your code to fit 4.0’s new API:

1. Ditch initSelection (Fix the Compatibility Error) #

Select2 4.0 completely removed the initSelection method—it now handles initial values natively, so you don’t need that custom logic anymore. Here’s what to do instead:

• If your .addTags element already has a comma-separated value (like value="bug,feature"), Select2 will automatically parse it into tags when initialized (as long as multiple: true is set).
• If you need to set initial values dynamically, use the val() method with an array of tag IDs, then trigger a change event to tell Select2 to update:

  $('.addTags').val(['bug', 'feature']).trigger('change');
  

2. Fix Ajax Tag Suggestions #

Select2 4.0 updated its Ajax configuration—most notably, the results callback was renamed to processResults, and parameter handling changed slightly. Adjust your Ajax setup like this:

• Replace the old results callback with processResults
• Use params.term (instead of the standalone term parameter) to access the user’s input in the data function

3. Replace createSearchChoice with createTag #

The createSearchChoice method was replaced with createTag in 4.0. This function lets you define how new tags are created when the user types a term that doesn’t exist in your database results.

Full Updated Code #

Here’s your revised code that works with Select2 4.0, incorporating all these changes:

$('.addTags').select2({
  placeholder: "Problem Tags",
  allowClear: true,
  minimumInputLength: 2,
  tags: true,
  createTag: function(params) {
    var term = params.term.trim();
    // Only create a tag if it doesn't already exist in the current selection
    var tagExists = $('.addTags').find('[data-select2-tag="true"]').filter(function() {
      return $(this).text().localeCompare(term) === 0;
    }).length > 0;
    
    if (!tagExists) {
      return {
        id: term,
        text: term,
        tag: true // Mark this as a custom user-created tag
      };
    }
  },
  multiple: true,
  ajax: {
    type: 'GET',
    url: "/Problem/GetTags",
    dataType: 'json',
    data: function(params) {
      return {
        term: params.term,
        page_limit: 15
      };
    },
    processResults: function(data, params) {
      return {
        results: data.tags
      };
    }
  }
});

// Uncomment below if you need to set initial tags dynamically:
// $('.addTags').val(['existing-tag-1', 'existing-tag-2']).trigger('change');

Quick Notes #

• The createTag function replicates your old createSearchChoice logic by checking if the term already exists as a custom tag before creating a new one.
• Select2 now handles initial value parsing automatically, so you can remove all that initSelection code entirely.
• The Ajax processResults callback works exactly like the old results callback—it just uses the updated parameter naming from 4.0.

内容的提问来源于stack exchange，提问作者BishalG