web-dev-qa-db-ja.com

2バージョン4.0を選択すると、ユーザーはフリーテキストを入力できます

Select2の最新バージョンを使用しています： Select2 4. 。

ユーザーがフリーテキストを入力できるようにしたいと思います。言い換えると、ユーザーがドロップダウン（ajaxによって返されるデータ）でオプションを見つけることができない場合、ユーザーが入力したテキストを「選択」できるようにしたいのです。

これは私のマークアップです：

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

そしてこれは私がSelect2を初期化するために使用しているJavaScriptです：

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

createSearchChoiceを追加しましたが、機能しません。 この答え も見てきましたが、今のところ運がありません。

jqueryjquery-select2jquery-select2-4
12
mikey

これは、3.xでの文書化されていない動作に起因する4.0.0での変更でした。 3.xでは、createSearchChoiceを使用している場合は、tags（trueまたは空の配列に設定）も使用しているはずです。これは、createSearchChoiceとtagsが相互に関連付けられているためです。

4.xでは、実際にタグを作成していたため、createSearchChoiceはcreateTagに名前が変更されました。これは 4.0.0-beta.2リリースノート に記載されています。さらに、createSearchChoiceの2番目の（これも文書化されていない）パラメーターは実装されていませんが、この場合は実際には必要ありません。

したがって、これら2つの変更点に注意すると、ユーザーが新しいオプションを追加できるようにするための作業コードは次のようになります。

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

createTagを実装しなかったことに注意してください。これは、 デフォルトの実装 が古いcreateSearchChoiceが実行しようとしていたことと一致したためです。 tags: trueを追加しましたが、それを機能させるにはまだ必要だからです。

それに加えて、<select>に変更したため、無効なマークアップがいくつかあります。

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

type属性（以前はhiddenに設定されていた）は、<input />を使用していて、<select>では無効な場合にのみ必要です。これにより、目立った変化が生じることはありません。

29
Kevin Brown