javascript - tag - select2 update options

Etiquetado con AJAX en select2

Question

Estoy haciendo etiquetas con select2

Tengo estos requisitos con select2:

1. Necesito buscar algunas etiquetas usando select2 ajax
2. También necesito usar "etiquetas" en select2 que permite valores que no están en la lista (resultado de Ajax).

Ambos escenarios funcionan de forma independiente. Pero unidos, los valores de Jax solo se rellenan. Si escribimos otros valores que no están en la lista, dice "no se encontraron coincidencias"

Mi escenario Si el usuario escribe cualquier valor nuevo que no se encuentre en la lista, permítales formar su propia etiqueta.

¿Alguna manera de hacer que esto funcione?

Answer 1

Seleccione 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)''
      };
    },
});

Seleccione v3.5.2

Ejemplo con algunas mejoras:

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"
  }
]

ACTUALIZADO el 2015-01-22:

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

ACTUALIZADO 09-09-2015:

Con Select2 v4.0.0 + se hizo más fácil.

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

Answer 2

Puede hacer que esto funcione, haciendo que su función ajax también devuelva el término de búsqueda, como el primer resultado en la lista de resultados. El usuario puede seleccionar ese resultado como una etiqueta.

Answer 3

Select2 tiene la función "createSearchChoice":

Crea una nueva opción seleccionable del término de búsqueda del usuario. Permite la creación de opciones no disponibles a través de la función de consulta. Útil cuando el usuario puede crear opciones sobre la marcha, por ejemplo, para el uso de ''etiquetado''.

Puedes lograr lo que quieras usando:

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

Aquí hay una respuesta más completa que devuelve un resultado JSON a una búsqueda ajax, y permite que se creen etiquetas a partir del término, si el término no arrojó resultados:

$(".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
      };
    }
  }
});

Answer 4

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

solo agregue este elemento de opción