ChosenとSelect2 は、 selectboxを拡張するための 2 つのより一般的なライブラリです。
どちらも積極的にメンテナンスされているようですが、Chosen の方が古く、jQuery と Prototype の両方をサポートしています。
Select2 は jQuery のみであり、ドキュメントには Select2 が Chosen に触発されたものであると書かれていますが、改善点 (ある場合) や書き直しのその他の理由については詳しく説明されていません。
2 つのライブラリにはほとんど同じ機能セットがあります。私が見つけた唯一の比較は、やや決定的な jsperf テスト ページです。
これらのライブラリには、他のライブラリよりも優れているものがありますか?
Select2 3.3.1 の時点で、以下はその README.md に記載されている内容です。
選択した Select2 サポートがサポートしないものは何ですか?
- 大規模なデータセットの操作: Chosen では、データセット全体を
optionDOM にタグとして読み込む必要があるため、小規模なデータセットの操作に制限されます。Select2 は関数を使用してオンザフライで結果を検索します。これにより、結果を部分的に読み込むことができます。- 結果のページング: Select2 は大規模なデータセットで動作し、一度に少量の一致する結果しかロードしないため、ページングをサポートする必要があります。Select2 は、ユーザーが現在ロードされている結果セットの一番下までスクロールすると検索機能を呼び出し、結果の「無限スクロール」を可能にします。
option結果のカスタム マークアップ: Chosen は、タグでサポートされる唯一のマークアップであるため、テキスト結果のレンダリングのみをサポートします。Select2 は、結果を表すあらゆる種類のマークアップを生成するために使用できる拡張ポイントを提供します。- その場で結果を追加する機能: Select2 は、ユーザーが入力した検索用語から結果を追加する機能を提供し、タグ付けに使用できるようにします。
IMHO Chosen は「維持」されていますが、「積極的に維持」されていません。Chosen に対する 341 のイシューと 51 のプル リクエスト。Select2 には 128 の課題と 25 のプル リクエストがあります。これらのパターンは基本的に
どちらを選択しても、ユース ケースがまさにそのスイート スポットにある場合は、どちらでも機能します。そうでない場合は、最終的には独自に作成するか、これらを大幅にカスタマイズする必要があります。どちらの場合でも、どちらを選択するかは特に重要ではありません。ここでは、Select2 がおそらく最初の選択肢として適切であるという点で、@Andy Ray と @paul の側に立つと思います。
言及する価値のあるもう 1 つの違いは、がandChosenで開発されているのに対し、単純なandです。とが不必要な複雑さの層であり、デバッグが困難になるのは私の個人的な選択肢です。SassCoffeeScriptSelect2CSSJSSassCoffeeScript
両方を試した後、私はどちらも使用しないことに決めました -Select2アイテム作成機能を取得しようとすると、要素に接続されているときにそれを行うことができないため、非常に厄介な問題であることが判明しました<select>- 私が持っているフープをよく考えていませんでした飛び越える。
新しい要素をフォームの DOM に追加するだけのselectize.jsを使用することにしまし<option>...</option>た。これは正気です。それも使用しますLESSが、私はそれをバイパスし、コンパイルされたものCSSをプロジェクトで直接調整します。
ps。不足している点について詳しく調べたら、この回答を更新しようとします
まず、Chosen と Select2 は 2 つの優れたプラグインであり、これは Chosen に関する私の個人的な経験です。彼らが言っていることはすべて、選ばれし者に関して真実です。
Pēteris Caune が指摘した問題はselect2 年前のものであり、まだ正式な修正はありません。API に関する優れたドキュメントはまったくありません。それは何度も指摘されてきました (watch issue 671) が、まだ何もありません。この問題を解決するのにほぼ2年かかりました。overflow:hidden表示する前にdivを非表示にすると、witdh:X%選択したものは基本的に機能しません(また、問題を探さなければ基本的に決してわからないオプションを使用する必要があります)。
主な問題は、問題 92 で DelvarWorld が述べたような修正速度だと思います。
私のプルリクエストはこの問題を修正しましたが、私の他のものと選択したものの多くと同様に、それらは無視されています。このプロジェクトには、コード ベースが小さすぎる貢献者が多すぎます。
私は最初に MIT ライセンスのために Chosen を選びましたが、すべての問題 (ドロップダウン カット、API が見つからない、オーバーフローが隠されているのを探す時間) があったので、select2 に切り替えることにしました。そしてより速い修正。
Select2 では機能するが、Chosen では機能しない機能の 1 つは、またはselectを持つ要素内にあります。overflow: hiddenoverflow: auto
Chosen の対応する問題: https://github.com/harvesthq/chosen/issues/86
これらの 2 つのプラグインを使用して、いくつかの相違点を見つけました。
select2 を使用すると、オプション内の任意の場所で検索できます。たとえば、ABCDEFG というオプションがあり、CDE と入力すると、検索結果にそのオプションが表示されますが、選択した場合は AB.. などと入力して結果を取得する必要があります。
特に IE では、大規模なデータセットでは、selected の方が select2 よりも高速に見えることがわかりました。
Select2 はモバイルをサポートしますが、Chosenは特にiPod、iPhone、およびモバイル Android で自身を無効にします。モバイルで「拡張」選択ボックスを使用する場合、これにより選択が容易になります。
Select2 での私の経験は、デスクトップでは素晴らしいものでしたが、タッチ モバイル デバイスでは非常に多様で、常にいくつかの癖がありました。たとえば、ics と株式ブラウザのドロップダウンを使用した Xperia st15i では、キーボードがフォーカスを盗むため、常に閉じていました。再び開く唯一の方法は、メニューを何十回もタッチし、指を少しの間押したままにし、その他のブードゥー魔法を行うことです。または、ドロップダウン リストが閉じている間に入力を開始すると、何人のユーザーがこれを理解するでしょうか?
Selectize.js は Select2 よりもはるかにスムーズに見えますが、値が選択または入力されたときに何らかの理由でページが左端まで移動するなど、モバイルではそれ自体にも問題があります。また、オーバーフローをサポートしていない古い Android 2.x デバイスでは、キーボードがポップアップしないため、いくつかのトップ オプションを超えて選択することはできません。:(
まだChosenをテストする必要があり、モバイルデバイスで無効にすることはそれほど悪い考えではないかもしれません.
更新: 現在、Chosen もテストしましたが、1 つの点で優れています。デフォルトではモバイルでは動作しません (すばらしい!)。ただし、単語のフィルタリングに問題があります。たとえば、単語の途中では検索しません。また、並べ替えに hack を使用すると、完全なオプションも無視されます。製図板に戻ります。
私がChosenではなくselect2を選んだ理由
select2 が持っている重要な機能は、他のコントロールが魔法のように自動的に持っていないもので、コントロールの右側に「x」が付いた「すべてクリア」の選択です。これは私のアプリケーションのキラー機能です。他の選択タグ拡張ライブラリにこの機能がない理由がわかりません。
Select2 は AJAX をサポートしています
Select 2 は、選択したものに比べてサイズが少し重くなっています。
ajax 操作の公式サポートがないため、Select2 に切り替えました。