web-dev-qa-db-fra.com

Marquage avec AJAX dans select2

Je fais du balisage avec select2

J'ai ces exigences avec select2:

  1. J'ai besoin de rechercher certaines balises à l'aide de select2 ajax
  2. J'ai également besoin d'utiliser des "balises" dans select2 qui autorisent des valeurs qui ne sont pas dans la liste (résultat Ajax).

Les deux scénarios fonctionnent indépendamment. Mais les valeurs aJax réunies ne sont renseignées que. Si nous tapons d'autres valeurs qui ne figurent pas dans la liste, alors il est dit "aucune correspondance trouvée"

Mon scénario Si l'utilisateur saisit une nouvelle valeur qui ne figure pas dans la liste, autorisez-le à créer sa propre balise.

Une façon de faire fonctionner ça?

javascriptjqueryjquery-select2
70
Sri

Select2 a la fonction "createSearchChoice":

Crée un nouveau choix sélectionnable à partir du terme de recherche de l'utilisateur. Permet la création de choix non disponibles via la fonction de requête. Utile lorsque l'utilisateur peut créer des choix à la volée, par exemple pour le cas d'utilisation du "marquage".

Vous pouvez réaliser 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 à une recherche ajax et permet de créer des balises à partir du terme, si le terme n'a renvoyé 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
      };
    }
  }
});
97
Chris Edwards

Sélectionnez 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)'
      };
    },
});

Sélectionnez v3.5.2

Exemple avec quelques améliorations:

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

MISE À JOUR 2015-01-22:

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

MISE À JOUR 2015-09-09:

Avec Select2 v4.0.0 +, c'est devenu plus facile.

Sélectionnez 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
      };
    }
  }
});
34
Alexander Fedorov
createSearchChoice : function (term) { return {id: term, text: term}; }

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

5
chuck911

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

0
Tor