Sélectionnez 2 version 4.0 pour permettre à l'utilisateur d'entrer du texte libre

Je suis en utilisant la dernière version de Select2: Select2 4.0.

Je voudrais permettre aux utilisateurs de saisir du texte libre. En d'autres termes, si un utilisateur ne peut pas trouver une option dans la liste déroulante (données renvoyées par ajax), je veux qu'ils soient en mesure de sélectionner n'importe quel texte ils ont tapé.

C'est mon balisage:

<select class="required form-control" id="businessName" data-placeholder="Choose An Name" > </select>

Et c'est le JavaScript que j'utilise pour initialiser Select2:

$("#businessName").select2({
    ajax: {
      url: "/register/namelookup",
      dataType: 'json',
      delay: 250,
      type: 'post',
      data: function (params) {
        return {
          businessName: params.term, //search term
          page: params.page
        };
      },
      processResults: function (data, page) {
        return {
          results: data.items
        };
      },
      cache: false
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 4,
    createSearchChoice:function(term, data) {
        if ( $(data).filter( function() {
          return this.text.localeCompare(term)===0;
        }).length===0) {
          return {id:term, text:term};
        }
    },
});

J'ai ajouté createSearchChoice mais ça ne fonctionne pas. J'ai regardé cette réponsemais jusqu'à présent aucune chance.

source d'informationauteur mikey

  1. 26

    Ce est un changement dans la 4.0.0 qui a résulté de sans-papiers comportement en 3.x. En 3.x, si vous utilisez la createSearchChoice vous aussi devrait avoir été à l'aide de tags (mise à true ou un tableau vide). C'est parce que createSearchChoice et tags ont été attachés ensemble.

    En 4.x, createSearchChoice a été renommé createTag parce que c'était vraiment de la création de la balise. Cela a été documenté dans l' 4.0.0-bêta.2 notes de version. En outre, la deuxième (également sans papiers) paramètre createSearchChoice n'a jamais été mis en œuvre - mais vous n'avez pas besoin de l'utiliser dans ce cas.

    Donc, avec ces deux changements notés, le code de travail afin de permettre de nouvelles options ajoutées par l'utilisateur est

    $("#businessName").select2({
    ajax: {
      url: "/register/namelookup",
      dataType: 'json',
      delay: 250,
      type: 'post',
      data: function (params) {
        return {
          businessName: params.term, //search term
          page: params.page
        };
      },
      processResults: function (data, page) {
        return {
          results: data.items
        };
      },
      cache: false
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 4,
    tags: true
});

    Avis que je n'ai pas de mettre en œuvre createTagc'est parce que l'implémentation par défaut correspondait à ce que votre vieux createSearchChoice était en train de faire. J'ai fait ajouter tags: true bien, parce que c'est toujours requis pour le faire fonctionner.

    En plus de cela, vous avez certains invalides de balisage maintenant que vous avez changé pour un <select>.

    <select class="required form-control" id="businessName" data-placeholder="Choose An Name" ></select>

    La type attribut (précédemment définie hidden) n'est nécessaire que si vous utilisez un <input /> et n'est pas valable sur un <select>. Cela ne devrait pas faire de changement notable pour vous.