Explain Chosen and Select2 with examples

We can use two jQuery plugins to style the select box, namely Select2 and Chosen. Both the Select2 and Chosen plugins improve the appearance of selected boxes and enhance the behavior of the boxes, making them user-friendly. Additionally, both plugins work with multiple selected boxes as well as a single selected box.

choose

JavaScript plugin for creating user-friendly select boxes. Chosen is available in both prototype and JQuery versions.

Selected features

friendly user

Your users don’t have to wade through a bunch of possibilities; they can simply start with the name of what they’re looking for. Selecting an alternative is just a matter of pressing "Enter" or clicking the mouse; unmatched entries will be removed from the screen.

Progressive Enhancement

Since Chosen replaces the default HTML Select field, you no longer need to take any further steps to make it work in browsers that do not support JavaScript. The backend also doesn't use events to manage data.

Simple settings

Simply include the selected files in your application and open the plugin. Selection groups, selected states, multi-features, and browser tab order are automatically respected by selections.

Select 2

Select2 provides the user with a customizable select box that can be used for searches, remote datasets, markers, infinite scrolling and many other useful properties.

The characteristics of Select2 are

In addition to supporting search, tagging, remote datasets, infinite scroll, and many other options, it also provides users with user-customizable selection boxes.

RTL Environment

It supports RTL environment and has built-in search functionality in over 40 languages.

Ajax

You can use Ajax to quickly search a long list of items.

Create fully skinnable CSS using Sass and optional Bootstrap 3 themes.

Selected Javascript library

To use the selected plugin in JQuery we have to add some libraries as shown below -

• chosen.jquery.min.js

• Select.min.css

To also activate the plugin on the selected box, we must add the following code -

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

The code written above is a script in JQuery.

Select2’s JavaScript library

To use select2 plugin in jQuery, we have to add some libraries as shown below -

• select2.min.js

• select2.min.css

To also activate the plugin on the selected box, we must add the following code -

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

The code written above is a script in JQuery.

We have understood the basics of selected and select2, now let us come to the gist i.e. we will observe the difference between them in the gist.

Difference between Chosen and Select2

The two most commonly used libraries for enhancing select boxes are Choose and select2. Chosen is older than Select2 and supports jQuery and Prototype. Both are being updated. Select2 is inspired by Chosen and only supports jQuery.

Let’s see the difference between selected and select2 -

Download Data

When loading data using selected, the entire dataset needs to be loaded as an option tag in the DOM, so processing small datasets is limited. Select2, on the other hand, uses the concept of functions to find results dynamically, allowing the select2 method to partially load the results, thus eliminating the shortcomings of selected .

Paging requirements

As we discussed in the previous point, the entire data set is loaded by the selector at once, which means there is no need to divide the data into parts, so the paging concept is useless. Select2 function on the other hand handles the complete data set and partially loads the required results and it supports the concept of paging. When the user scrolls to the bottom of the current data, it will call the search function to provide more data by loading it.

Tag support types

The only markup support provided by the

option tag is the rendered text supported by the selection, Select2 on the other hand provides an extension point that can be used to make various markups to represent the results.

Add results

To add results, Choosen and select2 have two options, static or dynamic, but Choose cannot add results dynamically, while select2 does the exact opposite and allows results to be added dynamically by using tags.

Development

Sass and CoffeeScript were used to develop select, while pure JavaScript and CSS were used to develop select2.

The differences given above are the main differences between Select and Select, there are also some minor differences such as Select is 27KB in size while Select 2 is larger at 57 KB.

NOTE - Saas and CoffeeScript have been found to make debugging choices more difficult.

Select2 openly supports mobile devices, while Chosen intentionally disables itself on some devices. Therefore, if you want to use the "expanded select box" on mobile devices, it is recommended to use Select2.

in conclusion

In this article, we learned that there are two JQuery plug-ins that can be used to style the selection box, namely Select2 and Chosen. Both the Select2 and Chosen plugins improve the appearance of selected boxes and enhance the behavior of the boxes, making them user-friendly. There are many differences between Select2 and choose, including the data loading process, whether paging is required, whether results can be added dynamically, and development methods.

The above is the detailed content of Explain Chosen and Select2 with examples. For more information, please follow other related articles on the PHP Chinese website!