Tom Selectで最初から全件表示させたい

環境

• Tom Select v2.4

やりたいこと

Tom Selectは、select要素をよりリッチで使いやすくするためのJavaScriptライブラリである。jQueryに依存していないのが特徴。

以下のようなアイテムが1000件超えのセレクトボックスのサンプルコードがある。

codepen.io

デフォルトではTom Selectは50件までしか表示してくれない。最初から全件表示させたい。

やり方

Tom Selectを初期化する際に、maxOptionsというオプションを設定することで、ドロップダウンに表示される最大のオプション数を制御できる。この値を null に設定すると、表示件数の上限がなくなる。デフォルトでは50件が上限になっているわ。

document.addEventListener('DOMContentLoaded', function() {
  new TomSelect('#my-tom-select', {
      options: sampleOptions,     // JavaScriptからオプションの配列を渡す
      maxOptions: null,
  });
});

参考リンク

よく見ると公式ドキュメントに書いてあったりする

• Usage Documentation - Tom Select