jQuery選択ボックスコンポーネント-Cosen vs select2

この記事は、MartínMartínezとChris Perryによって査読されました。 SetePointコンテンツを最高にしてくれたSitePointのすべてのピアレビュアーに感謝します！プロジェクトに取り組んだことはありますか？視覚的に何かが外れているように見えましたか？プロジェクトはほぼ終了したのかもしれませんが、一部の要素はそれほど良く見えませんでしたか？これらは小さな詳細かもしれませんが、違いを生みます。

プロジェクトに魅力のない選択ボックスが含まれていて、それらにさらに機能を追加する場合は、選択されたものとSelect2が非常に便利であることがわかります。これらは、選択したボックスのスタイルをスタイリングして外観を向上させ、動作をカスタマイズし、よりユーザーフレンドリーにするのに役立つ2つのjQueryプラグインです。 この記事では、これらの2つのプラグインを真っ直ぐに配置し、それらの機能とユースケースを比較して、どちらに最適かについて情報に基づいた選択をすることができます。

キーテイクアウト

chosen and select2は、選択したボックスの機能を強化するjQueryプラグインであり、外観と使いやすさを向上させます。選択されたものは信頼性が高く堅牢なプラグインですが、select2ほどアクティブに維持されていないため、新しい機能と統合を定期的に追加します。 両方のプラグインがプレースホルダーテキストをサポートし、オプション内で検索を許可し、選択の数を制限する機能を提供します。ただし、select2は、ドロップダウンが開いているときにオプションを選択解除するオプションも提供します。これは、選択された機能ではまだ実装されていません。

Select2は、プログラマティックアクセス、タグ付け、トークン化、テンプレートなど、追加の機能で際立っています。また、Ajaxをサポートし、より高度なカスタマイズオプションを提供しているため、選択したボックスのより強力なツールになります。

選択されたものは、基本的な選択ボックスの拡張に適したオプションですが、より高度な機能と定期的な更新にはselect2が推奨されます。 Select2は包括的なドキュメントも提供しており、プロジェクトでの実装と使用を容易にします。

• インストール
• 選択されたものとselect2の両方がGithubを介して利用できます。これは、それぞれのリポジトリをクローンして、必要なファイルを取得できることを意味します。
それ以外の場合は、Bower（githubへのインターフェイスとして機能する）の両方のプラグインをインストールできます。 Bowerがあなたの好みのルートである場合、あなたがそれにいる間にjQueryをつかむこともできます。
• それ以外の場合は、選択したCDN（CDNJなど）からファイルをつかみ、通常の方法でページに含めます。これは私が以下のテンプレートで行ったことです。これを使用して、チュートリアルの例に従うことができます。

  chosen

  <span>git clone https://github.com/harvesthq/chosen.git
  </span><span>git clone https://github.com/select2/select2.git
  </span>

  select2

  bower <span>install jquery
  </span>bower <span>install select2
  </span>bower <span>install chosen
  </span>

  プロジェクトは積極的に維持されていますか？

  select2と対照的で、違いは顕著です。このライブラリの開発は完全に蒸気を取り、最近公式の4番目のバージョン（4.0.0）をリリースしました。これは、新しい機能が追加され、他の機能が非推奨または削除されていることを意味します。

  別の有用なメトリックは、スタックオーバーフロー上のこれらのタグを使用した質問の量です。ここで自分で試すことができます：http：//stackoverflow.com/tags

  「select2」を入力してから「選択」と対比すると、select2プラグインの周りにはるかに多くのアクティビティがあるように見えることがわかります。また、AngularjsやRuby on Railsなど、多くの統合があることもわかります。

  ボックスとプレースホルダーを選択

  select2と選択した選択は、シンプルな選択ボックスと複数の選択ボックスの表示方法を変更します。

  純粋なHTMLを使用した複数の選択ボックスでは、ユーザーはリストで利用可能なオプションの一部を確認できます。これは視覚的に魅力的ではなく、この見解に変更を加える必要があります。選択してselect2「リストビュー」を削除すると、選択ボックスの内部をクリックするとオプションのリストが表示されます。その場合にのみ、選択を行うことができます。

  両方のプラグインでオプションを検索できます。ボックス内をクリックして、選択した最初の文字を入力するだけで、結果は検索に応じてリアルタイムで表示されます。

  select2を使用すると、既に選択されているオプションを簡単に解除できます。ドロップダウンが開いている場合、選択した要素をクリックして選択を解除できます。 Chosenはまだこの機能を実装していません

  選択したものとselect2の両方が、シングルおよびマルチセレクトボックスのプレースホルダーテキストをサポートします。

  限られた数の選択
  複数の選択ボックスで、ユーザーが選択するオプションの数を制限する必要がある場合があります。選択したものとselect2を使用する利点は、選択の数を非常に簡単に変更できることです。
  両方のプラグインを備えたマルチセレクトボックスから選択できる選択の数を制限できますが、選択したこの機能のバージョンがより高度になっていることは注目に値します。制限に達した後、追加のオプションを選択しようとすると、イベントが呼び出されます。 この例では、ユーザーは1週間で最も生産的な2日間を選択するように求められます。彼らが3日目を選択しようとすると、選ばれたイベントを呼び出します。私は、限界に達したことを示すアラートを追加するために選択しました：

  を参照してください。

  レスポンシブデザイン

  人々はあらゆる種類のデバイスであなたのページを見るので、あなたのウェブサイトの他のコンポーネントと同様に、選択したボックスを選択する必要があります。選択されたものとselect2の両方が、パーセンテージで設定幅をサポートしており、機能は両方でほぼ同じです。これにより、画面サイズまたはブラウザウィンドウの幅を考慮したレスポンシブな選択ボックスを作成することができます。

  選択されたselect2がこの機能について持つ唯一の違いはコードです。 HTMLのSelectタグ内のSELECT2の幅を宣言できます。選択したボックスを選択して視覚的に優れた選択とselect2で、選択したボックスをどのように便利にするかを理解するために、以下を参照してください。

  <span>git clone https://github.com/harvesthq/chosen.git
  </span><span>git clone https://github.com/select2/select2.git
  </span>

  bower <span>install jquery
  </span>bower <span>install select2
  </span>bower <span>install chosen
  </span>

  その他の同様の機能

  
    
      <meta charset="UTF-8">
      <title>Chosen/Select2 Template</title>
      <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
    
    
  
      <script></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
      <script>// Additional logic goes here</script>
    
  
  

  
    
      <meta charset="UTF-8">
      <title>Select2 Template</title>
      <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
    
    
  
      <script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
      <script>// Additional logic goes here</script>
    
  
  

  chosen and select2には他の共通の機能がありますが、興味深いと感じた3つの機能を見てみたいと思います：無効な結果、隠された検索ボックス、左から左への（RTL）サポート。
  無効な結果
  これらの中で最も興味深いのは、無効な結果です。このオプションを設定すると、選択したオプションを強調表示します。障害のある選択肢を見ることができますが、選択することはできません。通常、無効な結果は、他の条件が満たされるまでユーザーがオプションを選択できないように設定されます。この機能は、選択ボックスを強力なツールに変え、ニーズに応じて使用する方法を学ぶと、ユーザーとのエンゲージメントが向上します。
  プラグインに無効な結果がアクティブになっていることを知らせるために、属性を無効にする= "disabled"をオプションタグに追加します。

  この選択した例では、ユーザーは地理的な場所で利用可能なオプションのみを選択できますが、利用できない場合でも他のオプションも表示できます。 検索ボックスを隠してください

  シングル選択ボックスのオプションリストに多くの選択肢がない場合は、検索ボックスを非表示にすることをお勧めします。選択した場合、検索ボックスを非表示にするには、disable_search_thresholdを使用し、選択ボックスのオプションの数よりも大きな値に設定する必要があります。

  <span>max_selected_options: 2 // Chosen Plugin
  </span>

  select2について追加すべきことの1つは、選択ボックスにあるオプションの数を心配することなく、検索ボックスを永久に非表示にできることです。これを行うことができます

  <span>git clone https://github.com/harvesthq/chosen.git
  </span><span>git clone https://github.com/select2/select2.git
  </span>

  右から左（rtl）サポート

  多数のWebサイトは、異なるアルファベットを持つ異なる言語で記述されており、それ以外に、これらの言語の一部は別の方向から読まれます。選択したボックスは、これらの言語のルールを使用して調整し、LTR（左から右）からRTLに方向をシフトすることをお勧めします。これにより、ユーザーエクスペリエンスが向上し、その地域のユーザー向けのWebサイトの使いやすさが向上します。

  選択したものとselect2の両方が、選択したボックスで左から左への手法をサポートしています。彼らが持っている唯一の違いは、select2がJavaScriptファイルでRTLサポートを宣言する必要があることです。その間、選択した場合、選択した選択クラスと一緒に選択した選択クラスをHTMLに追加するだけです。

  select2は選択されたものに触発され、選択された機能のほとんどを持っていますが、その貢献者はそこで止まりませんでした。プログラマティックアクセス、テンプレート、無効モード、タグ付け、トークン化など、選択したボックスの最もクールな機能のいくつかを構築しました。また、ajax。

  をサポートしています

  プログラマティックアクセス
  プログラマティックアクセスは、選択したボックスを別のレベルに引き上げます。複数の選択ボックスと組み合わせて非常に便利です。 JavaScriptを使用して、ルールに従ってこれらの選択ボックスに作用するボタンを追加できます。
  複数の選択ボックスの一部のオプションが互いにリンクするロジックを持っている場合、あなたの観察によると、これらの「リンクされた」オプションは多くのユーザーから選択される可能性が高い場合、これらを選択すると便利です。シングルクリックでの選択。

  bower <span>install jquery
  </span>bower <span>install select2
  </span>bower <span>install chosen
  </span>

  この例では、「iOSテクノロジー」ボタンをクリックして、「Swift」と「Objective-C」をすばやく設定できます。 <script>// Additional logic goes here</script> タグ付け
  タグ付けは、選択ボックスをより強力にし、通常の選択ボックスの制限を拡張するSelect2のもう1つの機能です。ユーザーは、まだオプションリストにない新しい選択肢を追加できます。

  タグ付けは、選択肢の範囲が非常に大きく、オプションリストのすべての選択肢を入力することはできない場合にも非常に便利です。タグ付けが有効になり、ユーザーがリストに選択肢を見つけることができない場合、選択のタグを作成するために「プッシュ」します。

  ただし、タグ付けを使用する場合は注意してください。選択ボックスの目的に対応しない無効なタグを入力する「悪意のある」ユーザーが誤用する可能性があるためです。
  タグを有効にするには、タグオプションをtrueに設定する必要があります。

  CodepenのSitePoint（@SitePoint）によるタグ付けとタグ付けを参照してください。

  トークン化

  タグがtrueに設定されると、トークンセパレータを含めるオプションが利用可能になります。タグの名前を入力した後、指定されたトークンセパレーターの1つを入力してください。次に、タグはオプションリストに選択肢として入力されます。トークンセパレーターは、キーボードから文字を入力してタグを作成するためのショートカットとして機能します。

  select2の助けを借りて、必要なキャラクターを備えたトークンセパレータを作成できます。次の例では、4つのトークンセパレータが使用されます。および ""（space）。

  <span>git clone https://github.com/harvesthq/chosen.git
  </span><span>git clone https://github.com/select2/select2.git
  </span>

  新しいオプションを入力して試してみて、セパレータ文字の1つを選択して選択してオプションリストに追加します。 テンプレート

  select2の最も強力な機能の1つはテンプレートです。テンプレートを使用すると、select2によって表示されるコンポーネントの外観をカスタマイズできます。この機能を使用して、オプションタグによって提供される最小入力を画像または他のコンポーネントでマージして、ユーザーの視覚的なディスプレイを作成できます。

  この例は、Select2のテンプレートとBootstrapのグリフィコンを組み合わせています：

  codepenのSitePoint（@SitePoint）によるPEN SELECT2テンプレートを参照してください。

  結論
  選択された選択肢はいくつかありますが、Select2は、選択したボックスで使用するための利用可能な機能の点でかなり多くを提供します。 Webサイトの「フロー」内に組み合わせると、選択されたオプションですが、より高度な機能にアクセスしたい場合は、Select2がより良い選択です。

  select2の使用を強くお勧めします。選択されたものよりも頻繁に更新され、バグが少なくなります。 Select2について非常に役立つと思ったことの1つは、そのドキュメントです。あなたがそれを読んでいる間、あなたはその場であなたのプロジェクトでselect2コンポーネントを使用することができます。

  選択またはselect2を使用して良い経験や悪い経験がある場合は、以下のコメントセクションでお知らせください。

  jQueryについてよく尋ねる質問（FAQ）選択ボックスコンポーネント：選択vs select2

  選択されたものとselect2の重要な違いは何ですか？

  chosenとselect2はどちらも、選択ボックスの機能を強化するために使用される一般的なjQueryプラグインです。それらの間の重要な違いは、彼らの特徴と使いやすさにあります。 Select2はAjaxをサポートします。これにより、ユーザーのタイプとしてその場でロードすることにより、大きなデータセットを使用することができます。また、タグ付けと無限のスクロールもサポートしています。一方、選択された選択は、Ajaxやタグ付けをサポートしていませんが、ユーザーフレンドリーな検索機能とよりシンプルなインターフェイスを提供します。select2を実装するには、最初にプロジェクトにselect2 CSSおよびjavaScriptファイルを含める必要があります。次に、$（ "。mySeLectbox"）。select2（）を使用して、任意のボックスのselect2を初期化できます。指示。また、select2（）関数にオプションを渡すことでselect2の動作をカスタマイズすることもできます。同じプロジェクトでは、通常はお勧めしません。どちらのプラグインも、選択したボックスの機能を強化することを目指しており、それらを一緒に使用すると、競合と予期しない動作につながる可能性があります。ニーズに最適なものを選択することをお勧めします。

  AngularやReactなどのフレームワークで選択またはSelect2を使用できますか？または反応します。ただし、互換性を確保するには、追加のラッパーまたはライブラリを使用する必要がある場合があります。選択ボックスで選択した初期化の場合、検索ボックスが自動的に追加されます。ユーザーはこのボックスに入力して、Selectボックスのオプションをフィルタリングできます。

以上がjQuery選択ボックスコンポーネント-Cosen vs select2の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。