Позначення тегами за допомогою AJAX у select2

Я роблю теги з select2

У мене є такі вимоги до select2:

1. Мені потрібно шукати деякі теги за допомогою select2 ajax
2. Також мені потрібно використовувати "теги" в select2, що дозволяє значення, яких немає у списку (результат Ajax).

Обидва сценарії працюють незалежно. Але об’єднані значення aJax лише заповнюються. Якщо ми введемо будь-які інші значення, яких немає у списку, тоді буде сказано "збігів не знайдено"

Мій сценарій Якщо користувач вводить якесь нове значення, якого немає у списку, дозвольте йому створити власний тег.

Будь-який спосіб зробити так, щоб це працювало?

Select2 має функцію "createSearchChoice":

Створює новий вибір на основі пошукового терміна користувача. Дозволяє створювати варіанти, недоступні за допомогою функції запиту. Корисно, коли користувач може самостійно робити вибір, наприклад, для випадку використання "позначення".

Ви можете досягти бажаного, використовуючи:

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
      };
    }
  }
});

Виберіть 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"
  }
]

ОНОВЛЕНО 22.01.2015:

Виправлено jsfiddle: http://jsfiddle.net/X6V2s/66/

ОНОВЛЕНО 09.09.2015:

З 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
      };
    }
  }
});

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

просто додайте цей пункт опції

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