Maxitem = 1のときにSelectizeをドロップダウンに変換しないようにすることはできますか？

Question

私は内部ウェブサイトのドロップダウンとテキスト入力を作成するために選択を使用しています。私の問題は、maxItemsが1に設定されるたびに、Selectizeは自動的にフィールドをドロップダウンに変えるということです。私はそれがtextareaの外観を持って、新しい項目をタグ付けしたい。しかし、ユーザーが複数の価値を生み出すことを許したくはありません。以下のコード例。

コードサンプル1：

<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity"> 

<script> 
    $('#quantitySelect').selectize({ 
     delimiter: ',', 
     plugins: ['restore_on_backspace'], 
     create: true, 
     maxItems: 2, 
     create: function(input) { 
      return { 
       value: input, 
       text: input 
      } 
     } 
    }); 
</script> 

このコードは、所望の効果を作成するが、2つの項目まで可能であろう。数量フィールドは1つの値のみを許可する必要があるため、ユーザーが2つの値を送信しようとしないようにします。 This code generates the desired look, but undesired functionality.

コード例2

<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity"> 

<script> 
    $('#quantitySelect').selectize({ 
     delimiter: ',', 
     plugins: ['restore_on_backspace'], 
     create: true, 
     maxItems: 1, 
     create: function(input) { 
      return { 
       value: input, 
       text: input 
      } 
     } 
    }); 
</script> 

は、これは複数の値を送信しようとするからユーザーを防ぐが、入力ボックスにドロップダウン一見を与えると感じるだろう。 This code generates the desired functionality, but undesired look.

私はSelectizeドキュメントをチェックしましたが、この動作を無効にする方法は見つかりませんでした。

Selectize.jsを次のように変更して、目的の動作が可能になります。あなたは「singleOverride：真を、」追加する場合

// This line is original to Selectize.js. 
self.settings.mode = self.settings.mode || (self.settings.maxItems === 1 ? 'single' : 'multi'); 
// Add the following code beneath it. 
if(self.settings.singleOverride === true){ 
    self.settings.mode = 'multi'; 
} 

は今、あなたのselectize定義に、それはmaxItemsを1に設定することができますが、SelectizeはまだのTextInput /タギング方法で動作します。以下の例：

<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity"> 

<script> 
    $('#quantitySelect').selectize({ 
     plugins: ['restore_on_backspace'], 
     create: true, 
     maxItems: 1, 
     tagType: "TAG_SELECT", 
     singleOverride: true, 
     create: function(input) { 
      return { 
       value: input, 
       text: input 
      } 
     } 
    }); 
</script> 

私は正しい方向に向いているとマイク・マッコーワンは信じています。

Answer 1

Selectize.jsを次のように変更して、目的の動作が可能になります。あなたは「singleOverride：真を、」追加する場合

// This line is original to Selectize.js. 
self.settings.mode = self.settings.mode || (self.settings.maxItems === 1 ? 'single' : 'multi'); 
// Add the following code beneath it. 
if(self.settings.singleOverride === true){ 
    self.settings.mode = 'multi'; 
} 

は今、あなたのselectize定義に、それはmaxItemsを1に設定することができますが、SelectizeはまだのTextInput /タギング方法で動作します。以下の例：

<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity"> 

<script> 
    $('#quantitySelect').selectize({ 
     plugins: ['restore_on_backspace'], 
     create: true, 
     maxItems: 1, 
     tagType: "TAG_SELECT", 
     singleOverride: true, 
     create: function(input) { 
      return { 
       value: input, 
       text: input 
      } 
     } 
    }); 
</script> 

私は正しい方向に向いているとマイク・マッコーワンは信じています。

Answer 2

コードをそのまま使用して、探していることを行う方法は実際にはありません。ここでselectize.jsで問題のコードは次のとおりです。

if ((settings.maxItems === null || settings.maxItems > 1) && self.tagType === TAG_SELECT) { 
    $input.attr('multiple', 'multiple'); 
} 

はどうやら、彼らはそのコードをオーバーライドすることができますプラグインアーキテクチャを持っていますが、プラグインを構築することは、この質問の範囲を超えだろう。

また、レポのフォークを作成してhttps://github.com/selectize/selectize.jsとし、そのコードを更新したり、ローカルコピーを更新したりすることもできます。

Answer 3

私は同じ問題に遭遇しましたが、私はSelectizeのソースcoudeを変更する考えが嫌いでした。 私の同僚の助言のおかげで、私はもっと良い解決策を見つけたかもしれません。

singleOverride: trueの代わりにmode: 'multi'を設定するだけで、このトリックを行うようです。

あなたのケースでは、コードは次のようになります。その方向に私を指しているため

<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity"> 

<script> 
    $('#quantitySelect').selectize({ 
     plugins: ['restore_on_backspace'], 
     create: true, 
     maxItems: 1, 
     tagType: "TAG_SELECT", 
     mode: 'multi', 
     create: function(input) { 
      return { 
       value: input, 
       text: input 
      } 
     } 
    }); 
</script>