使用示例解釋 Chosen 和 Select2

---

我們可以使用兩個 jQuery 外掛來設定選擇框的樣式，它們分別是 Select2 和 Chosen。這兩個外掛 Select2 和 Chosen 都可以改善選擇框的外觀並增強框的行為，從而使它們更易於使用者使用。此外，這兩個外掛都可用於多選框和單選框。

Chosen

一個使選擇框更易於使用者使用的 JavaScript 外掛，即 Chosen。Chosen 同時提供原型和 jQuery 版本。

Chosen 的特性

使用者友好

您的使用者不必費力地瀏覽大量的選項；他們只需開始輸入他們正在尋找的專案的名稱即可。選擇替代方案只需按“回車”鍵或單擊滑鼠即可；不匹配的條目將從螢幕上移除。

漸進增強

由於 Chosen 替換了預設的 HTML Select 欄位，因此無需再採取任何其他步驟即可使其在不支援 JavaScript 的瀏覽器中執行。後端也不使用事件來管理資料。

簡單設定

只需將選定的檔案包含在您的應用程式中並啟用外掛即可。Chosen 會自動尊重 opt-groups、選中狀態、多個特性和瀏覽器選項卡順序。

Select2

Select2 為使用者提供了一個可自定義的選擇框，可用於搜尋、遠端資料集、標記、無限滾動以及許多其他有用的屬性。

Select2 的特性包括

除了支援搜尋、標記、遠端資料集、無限滾動等功能外，它還為使用者提供了一個可自定義的選擇框。

RTL 環境

它支援 RTL 環境，並內建了超過 40 種語言的搜尋功能。

Ajax

您可以使用 Ajax 快速搜尋專案的長列表。

使用 Sass 建立的完全可換膚的 CSS 以及可選的 Bootstrap 3 主題。

Chosen 的 Javascript 庫

要在 JQuery 中使用 chosen 外掛，我們必須新增一些庫，如下所示：

• chosen.jquery.min.js

• chosen.min.css

此外，要啟用所選框上的外掛，我們必須新增如下程式碼段：

$(“.chosen-select”).chosen()

上面編寫的程式碼段是 JQuery 中的指令碼。

Select2 的 JavaScript 庫

要在 jQuery 中使用 select2 外掛，我們必須新增一些庫，如下所示：

• select2.min.js

• select2.min.css

此外，要啟用所選框上的外掛，我們必須新增如下程式碼段：

$(“.chosen-select”).select2()

上面編寫的程式碼段是 jQuery 中的指令碼。

我們已經瞭解了 Chosen 和 Select2 的基礎知識，現在讓我們進入重點，即我們將要從幾個方面看到的兩者的區別。

Chosen 和 Select2 之間的區別

用於增強選擇框的兩個最常用的庫是 Chosen 和 Select2。Chosen 比 Select2 更古老，並且支援 jQuery 和 Prototype。兩者都在不斷更新。Select2 受到 Chosen 的啟發，並且只支援 jQuery。

讓我們來看一下 Chosen 和 Select2 之間的區別：

載入資料

在使用 Chosen 載入資料時，它需要將整個資料集作為選項標籤載入到 DOM 中，因此在處理小型資料集時存在限制。另一方面，Select2 使用函式的概念來動態查詢結果，這使得 Select2 方法可以部分載入結果，從而克服了 Chosen 的缺點。

分頁需求

正如我們在前一點中討論的那樣，Chosen 會一次性載入整個資料集，這意味著沒有必要將資料分成多個部分，因此分頁概念沒有用武之地。另一方面，Select2 函式處理完整的資料集並部分載入所需的結果，並且它支援分頁的概念。當用戶滾動到底部時，它會調用搜索函式，透過載入更多資料來提供更多資料。

標記支援型別

Chosen 只通過選項標籤提供渲染文字的標記支援，另一方面，Select2 提供了一個擴充套件點，可用於建立各種標記來表示結果。

新增結果

要新增結果，Chosen 和 Select2 都有兩種選擇：靜態或動態，但 Chosen 無法動態新增結果，而 Select2 則與此相反，它允許透過使用標記動態新增結果。

開發

Chosen 使用 Sass 和 CoffeeScript 開發，而 Select2 使用純 JavaScript 和 CSS 開發。

以上列出的差異是 Chosen 和 Select 之間的主要區別，還存在一些細微的差異，例如，Chosen 的大小為 27KB，而 Select2 的大小更大，為 57 KB。

注意 - 已發現 Saas 和 CoffeeScript 使除錯 Chosen 變得更加困難。

Select2 公開支援移動裝置，而 Chosen 則有意在某些裝置上停用自身。因此，如果您希望在移動裝置上使用“擴充套件選擇框”，建議使用 Select2。

結論

在本文中，我們瞭解到有兩個 JQuery 外掛可用於設定選擇框的樣式，它們分別是 Select2 和 Chosen。這兩個外掛 Select2 和 Chosen 都可以改善選擇框的外觀並增強框的行為，從而使它們更易於使用者使用。Select2 和 Chosen 之間存在許多差異，包括資料載入過程、分頁需求、動態新增結果的能力以及它們的開發方式。