用例子解釋Chosen和Select2

我們可以使用兩個 jQuery 外掛來設定選擇框的樣式，即 Select2 和 Chosen。 Select2 和 Chosen 插件都改進了所選框的外觀並增強了框的行為，從而使它們變得用戶友好。此外，這兩個插件都可以用於多個選定的框以及單個選定的框。

選擇

JavaScript 插件，用於建立使用者友善的選擇框。 Chosen 在原型和 JQuery 版本中均可使用。

被選取的特徵

使用者友善

您的用戶不必費力地瀏覽一大堆可能性；他們可以簡單地以他們正在尋找的東西的名稱開頭。選擇替代方案只需按“Enter”鍵或按滑鼠即可；不匹配的條目將從螢幕中刪除。

漸進增強

#由於 Chosen 替換了預設的 HTML Select 字段，因此不再需要採取任何進一步的步驟來使其在不支援 JavaScript 的瀏覽器中運行。後端也不使用事件來管理資料。

簡單設定

只需將選定的檔案包含在您的應用程式中並開啟外掛程式即可。選擇群組、選定狀態、多重功能和瀏覽器標籤順序都會自動受到選擇的尊重。

選擇2

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

Select2的特點是

除了支援搜尋、標記、遠端資料集、無限捲動和許多其他選項之外，它還為使用者提供了使用者可自訂的選擇框。

RTL 環境

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

阿賈克斯

您可以使用 Ajax 快速搜尋一長串項目。

使用 Sass 和可選的 Bootstrap 3 主題創建完全可換膚的 CSS。

選擇的Javascript庫

要在 JQuery 中使用所選插件，我們必須新增一些函式庫，如下所示 -

• chosen.jquery.min.js

• #選擇.min.css

#也要啟動所選框上的插件，我們必須新增以下程式碼 -

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

上面寫的這段程式碼是JQuery中的腳本。

Select2 的 JavaScript 函式庫

要在 jQuery 中使用 select2 插件，我們必須新增一些函式庫，如下所示 -

• select2.min.js

• select2.min.css

也要啟動所選框上的插件，我們必須新增以下程式碼 -

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

上面寫的這段程式碼是JQuery中的腳本。

我們已經了解了 selected 和 select2 的基礎知識，現在讓我們進入要點，即我們將在要點中觀察它們之間的區別。

Chosen 與 Select2 的差異

用於增強選擇框的兩個最常用的庫是 Choose 和 select2。 Chosen 比 Select2 更古老，並且支援 jQuery 和 Prototype。兩者都在更新中。 Select2 的靈感來自於 Chosen，並且僅支援 jQuery。

讓我們看看 selected 和 select2 之間的差異 -

載入資料

使用 selected 載入資料時，需要將整個資料集作為 DOM 中的選項標籤加載，因此處理小型資料集會受到限制。另一方面，Select2 使用函數的概念，動態尋找結果，允許 select2 方法部分載入結果，從而消除了 selected 的缺點。

分頁需求

正如我們在上一點中討論的那樣，整個資料集由選擇者立即加載，這意味著沒有必要將資料劃分為各個部分，因此分頁概念沒有用處。另一方面，Select2 函數處理完整的資料集並部分載入所需的結果，並且它支援分頁的概念。當使用者滾動到當前資料的底部時，它將調用搜尋功能，透過載入它來提供更多資料。

標記支援類型

選項標籤提供的唯一標記支援是所選內容支援的渲染文本，另一方面，Select2 提供了一個擴充點，可用於製作各種標記來表示結果。

新增結果

要新增結果，Chosen 和 select2 有兩個選項，靜態或動態，但 Choose 無法動態新增結果，而 select2 則執行完全相反的操作，並允許透過使用標記動態新增結果。

開發

Sass和CoffeeScript用於開發select，而開發select2則使用純JavaScript和CSS。

以上給出的差異是選擇和選擇之間的主要差異，也存在一些細微的差異，例如選擇的大小為 27KB，而選擇 2 的大小更大，為 57 KB。

注意 - Saas 和 CoffeeScript 已被發現使偵錯選擇變得更加困難。

Select2 公開支援行動設備，而 Chosen 則故意在某些設備上停用自身。因此，如果您想在行動裝置上使用“擴充選擇框”，建議使用 Select2。

結論

在本文中，我們了解到有兩個 JQuery 外掛可以用來設定選擇框的樣式，即 Select2 和 Chosen。 Select2 和 Chosen 插件都改進了所選框的外觀並增強了框的行為，從而使它們變得用戶友好。 Select2和choose有很多不同之處，包括資料的載入過程、是否需要分頁、能否動態添加結果以及開發方式等。

以上是用例子解釋Chosen和Select2的詳細內容。更多資訊請關注PHP中文網其他相關文章！