Marquage avec AJAX dans select2

Question

Je suis en train de faire le marquage avec select2

J'ai ces exigences avec select2:

1. J'ai besoin à la recherche des balises à l'aide select2 ajax
2. Aussi, j'ai besoin d'utiliser des "balises" dans select2 qui Permet à des valeurs qui ne sont pas dans la liste(Ajax).

Les deux scénarios travailler de façon autonome. Mais réunis aJax valeurs ne sont remplis. Si nous le type de toutes les autres valeurs qui ne sont pas dans la liste, puis il dit: "aucune correspondance trouvé"

Mon scénario Si l'utilisateur tapez la nouvelle valeur qui n'est pas dans la liste, leur permettre de faire leur propre étiquette.

De toute façon pour faire ce travail?

Answer 1

Select2 a la fonction "createSearchChoice":

Crée un nouveau sélectionnable au choix de l'utilisateur à partir du terme de recherche. Permet la création de choix pas disponible via la fonction de recherche. Utile lorsque l'utilisateur peut créer de choix à la volée, par exemple, pour le marquage cas d'utilisation.

Vous pouvez obtenir ce que vous voulez en utilisant:

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

Voici une réponse plus complète qui renvoie un résultat JSON à l'ajax de recherche, et permet de balises à être créé à partir de la durée, si le terme n'a donné aucun résultat:

$(".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 2

Exemple avec quelques améliorations:

http://jsfiddle.net/X6V2s/2/

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

Answer 3

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

il suffit d'ajouter cet élément d'option

Answer 4

Vous pouvez faire en sorte que votre fonction ajax renvoie également le terme recherché, en tant que premier résultat de la liste des résultats. L'utilisateur peut ensuite sélectionner ce résultat en tant que balise.