Select2 dropdown mais autoriser de nouvelles valeurs par l'utilisateur ?

Question

Je veux avoir une liste déroulante avec un ensemble de valeurs, mais aussi permettre à l'utilisateur de "sélectionner" une nouvelle valeur qui ne figure pas dans la liste.

Je vois que sélectionner2 supporte ceci si vous l'utilisez dans tags mais existe-t-il un moyen de le faire sans utiliser de balises ?

Answer 1

El excellente réponse fourni par @fmpwizard fonctionne pour Select2 3.5.2 et inférieur, mais il ne fonctionnera pas en 4.0.0 .

Depuis très longtemps (mais peut-être pas aussi tôt que cette question), Select2 supporte le "tagging" : les utilisateurs peuvent ajouter leur propre valeur si vous les y autorisez. Ceci peut être activé par le biais de l'option tags et vous pouvez jouer avec l'option un exemple dans la documentation .

$("select").select2({
  tags: true
});

Par défaut, cela crée une option dont le texte est identique à celui du terme de recherche qu'ils ont saisi. Vous pouvez modifier l'objet utilisé si vous cherchez à le marquer d'une manière particulière, ou créer l'objet à distance une fois qu'il est sélectionné.

$("select").select2({
  tags: true,
  createTag: function (params) {
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  }
});

En plus de servir de drapeau facile à repérer sur l'objet passé par le biais de la select2:select la propriété supplémentaire vous permet également de rendre l'option légèrement différente dans le résultat. Ainsi, si vous souhaitez signaler visuellement le fait qu'il s'agit d'une nouvelle option en mettant " (nouveau) "à côté, vous pourriez faire quelque chose comme ça.

$("select").select2({
  tags: true,
  createTag: function (params) {
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  },
  templateResult: function (data) {
    var $result = $("<span></span>");

    $result.text(data.text);

    if (data.newOption) {
      $result.append(" <em>(new)</em>");
    }

    return $result;
  }
});

Answer 2

Pour la version 4+, vérifiez cette réponse ci-dessous par Kevin Brown

Dans Select2 3.5.2 et inférieur, vous pouvez utiliser quelque chose comme :

$(selector).select2({
  minimumInputLength:1,
  "ajax": {
    data:function (term, page) {
      return { term:term, page:page };
    },
    dataType:"json",
    quietMillis:100,
    results: function (data, page) {
      return {results: data.results};
    },
    "url": url
  },
  id: function(object) {
    return object.text;
  },
  //Allow manually entered text in drop down.
  createSearchChoice:function(term, data) {
    if ( $(data).filter( function() {
      return this.text.localeCompare(term)===0;
    }).length===0) {
      return {id:term, text:term};
    }
  },
});

(extrait d'une réponse sur la liste de diffusion select2, mais je ne trouve pas le lien maintenant)

Answer 3

Juste pour le plaisir de garder le code vivant, j'affiche Code du violon @rrauenza de son commentaire .

HTML

<input type='hidden' id='tags' style='width:300px'/>

jQuery

$("#tags").select2({
    createSearchChoice:function(term, data) { 
        if ($(data).filter(function() { 
            return this.text.localeCompare(term)===0; 
        }).length===0) 
        {return {id:term, text:term};} 
    },
    multiple: false,
    data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});

Answer 4

Comme beaucoup de ces réponses ne fonctionnent pas en 4.0+, si vous utilisez ajax, vous pouvez faire en sorte que le serveur ajoute la nouvelle valeur comme une option. Cela fonctionnerait donc comme suit :

1. L'utilisateur recherche une valeur (ce qui entraîne une demande ajax au serveur).
2. Si la valeur trouvée est bonne, renvoyer l'option. Sinon, il suffit que le serveur ajoute cette option comme ceci : [{"text":" my NEW option)","id":"0"}]
3. Lorsque le formulaire est soumis, il suffit de vérifier si cette option est présente dans la base de données et, si ce n'est pas le cas, de la créer avant de l'enregistrer.

Answer 5

Il y a une meilleure solution je pense maintenant

il suffit de mettre le balisage à true dans les options de sélection ?

tags: true

de https://select2.org/tagging