Маркировка с помощью AJAX в select2

Я делаю тегирование с select2

У меня есть эти требования с select2:

Мне нужно найти некоторые теги, используя select2 ajax
Также мне нужно использовать "теги" в select2, который допускает значения, отсутствующие в списке (результат Ajax).

Оба сценария работают независимо. Но объединенные значения aJax только заполнены. Если мы вводим любые другие значения, не входящие в список, тогда в нем говорится "совпадения не найдены"

Мой сценарий Если пользователь вводит любое новое значение, которого нет в списке, разрешите им создавать свой собственный тег.

Как сделать эту работу?

Ответ 1

Select2 имеет функцию "createSearchChoice":

Создает новый выбираемый вариант из пользовательского поиска. Позволяет создание вариантов недоступно через функцию запроса. Полезно, когда пользователь может создавать варианты "на лету", например, для "тегирования" usecase.

Вы можете добиться того, чего хотите, используя:

createSearchChoice:function(term, data) {
  if ($(data).filter(function() {
    return this.text.localeCompare(term)===0;
  }).length===0) {
    return {id:term, text:term};
  }
},
multiple: true

Вот более полный ответ, который возвращает результат JSON в ajax-поиск и позволяет создавать теги из этого термина, если термин не возвращает никаких результатов:

$(".select2").select2({
  tags: true,
  tokenSeparators: [",", " "],
  createSearchChoice: function(term, data) {
    if ($(data).filter(function() {
      return this.text.localeCompare(term) === 0;
    }).length === 0) {
      return {
        id: term,
        text: term
      };
    }
  },
  multiple: true,
  ajax: {
    url: '/path/to/results.json',
    dataType: "json",
    data: function(term, page) {
      return {
        q: term
      };
    },
    results: function(data, page) {
      return {
        results: data
      };
    }
  }
});

Ответ 2

Выберите v4

http://jsfiddle.net/8qL47c1x/2/

HTML:

<select multiple="multiple" class="form-control" id="tags" style="width: 400px;">
    <option value="tag1">tag1</option>
    <option value="tag2">tag2</option>
</select>

JavaScript:

$('#tags').select2({
    tags: true,
    tokenSeparators: [','],
    ajax: {
        url: 'https://api.myjson.com/bins/444cr',
        dataType: 'json',
        processResults: function(data) {
          return {
            results: data
          }
        }
    },

    // Some nice improvements:

    // max tags is 3
    maximumSelectionLength: 3,

    // add "(new tag)" for new tags
    createTag: function (params) {
      var term = $.trim(params.term);

      if (term === '') {
        return null;
      }

      return {
        id: term,
        text: term + ' (new tag)'
      };
    },
});

Выберите v3.5.2

Пример с некоторыми улучшениями:

http://jsfiddle.net/X6V2s/66/

HTML:

<input type="hidden" id="tags" value="tag1,tag2" style="width: 400px;">

JS:

$('#tags').select2({
    tags: true,
    tokenSeparators: [','],
    createSearchChoice: function (term) {
        return {
            id: $.trim(term),
            text: $.trim(term) + ' (new tag)'
        };
    },
    ajax: {
        url: 'https://api.myjson.com/bins/444cr',
        dataType: 'json',
        data: function(term, page) {
            return {
                q: term
            };
        },
        results: function(data, page) {
            return {
                results: data
            };
        }
    },

    // Take default tags from the input value
    initSelection: function (element, callback) {
        var data = [];

        function splitVal(string, separator) {
            var val, i, l;
            if (string === null || string.length < 1) return [];
            val = string.split(separator);
            for (i = 0, l = val.length; i < l; i = i + 1) val[i] = $.trim(val[i]);
            return val;
        }

        $(splitVal(element.val(), ",")).each(function () {
            data.push({
                id: this,
                text: this
            });
        });

        callback(data);
    },

    // Some nice improvements:

    // max tags is 3
    maximumSelectionSize: 3,

    // override message for max tags
    formatSelectionTooBig: function (limit) {
        return "Max tags is only " + limit;
    }
});

JSON:

[
  {
    "id": "tag1",
    "text": "tag1"
  },
  {
    "id": "tag2",
    "text": "tag2"
  },
  {
    "id": "tag3",
    "text": "tag3"
  },
  {
    "id": "tag4",
    "text": "tag4"
  }
]

ОБНОВЛЕНО 2015-01-22:

Исправить jsfiddle: http://jsfiddle.net/X6V2s/66/

ОБНОВЛЕНО 2015-09-09:

С Select2 v4.0.0 + стало легче.

Выберите v4.0.0

https://jsfiddle.net/59Lbxvyc/

HTML:

<select class="tags-select" multiple="multiple" style="width: 300px;">
  <option value="tag1" selected="selected">tag1</option>
  <option value="tag2" selected="selected">tag2</option>
</select>

JS:

$(".tags-select").select2({
  // enable tagging
  tags: true,

  // loading remote data
  // see https://select2.github.io/options.html#ajax
  ajax: {
    url: "https://api.myjson.com/bins/444cr",
    processResults: function (data, page) {
      return {
        results: data
      };
    }
  }
});

Ответ 3

createSearchChoice : function (term) { return {id: term, text: term}; }

просто добавьте этот параметр

Ответ 4

Вы можете сделать эту работу, если ваша функция ajax также вернет поисковый запрос в качестве первого результата в списке результатов. Затем пользователь может выбрать этот результат как тег.