标记时Select2模板不会自动完成

Question

I'm trying to use Select2.js version 4.0 to create tag selections. I would like a new tag to be created if it doesn't exit, and I would like the results formatted using a 'data-html' tag.

The problem is that the two elements( createTag and templateResult ) work independently, but when I use them together the autocomplete options no longer show up when an user types in the search box.

Am I doing something wrong, or is this a limitation of Select2?

application.js

  $("#taglist").select2({
    tokenSeparators: [',', ' '],
    tags: true,
    createTag: function (tag) {
        // Case insensitive search for tag
        tagExists = false;
        $("#taglist option").each(function() {
            if ($.trim(tag.term).toUpperCase() == $.trim($(this).text()).toUpperCase()) {
                tagExists = true;
            }
        });

        // If the tag does not exist create it
       if (!tagExists) {
             return {
                id: tag.term,
                text: tag.term + " (create)",
                isNew: true
            };
        }
    },
    templateResult: function (choice) {
      if (!choice.id) { return choice.text; }
      var $choice = $(
        '<span><a>' + data.element.getAttribute('data-html') + '</a></span>' 
      );
      return $choice;
    }
  });

Answer 1

There is no data.element when tagging, so your templating methods need to be able to handle that. Ideally, your methods should be able to work with data.text and anything else would be optional.

So you should be falling back to data.text if there is nothing in the data-html attribute on the element.