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