select2

What is select2?

Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

What are select2's main functionalities?

Basic Usage

This feature allows you to transform a standard HTML select element into a Select2 element with basic functionality.

$(document).ready(function() {
  $('.js-example-basic-single').select2();
});

Multiple Select

This feature allows you to create a multiple select dropdown where users can select more than one option.

$(document).ready(function() {
  $('.js-example-basic-multiple').select2();
});

Loading Remote Data

This feature allows you to load data from a remote source via AJAX, making it useful for large datasets.

$(document).ready(function() {
  $('.js-data-example-ajax').select2({
    ajax: {
      url: 'https://api.example.com/data',
      dataType: 'json',
      processResults: function (data) {
        return {
          results: data.items
        };
      }
    }
  });
});

Tagging Support

This feature allows users to add new options to the select box by typing them in, useful for tagging systems.

$(document).ready(function() {
  $('.js-example-tags').select2({
    tags: true
  });
});

Other packages similar to select2

chosen-js

Chosen is another jQuery plugin that makes long, unwieldy select boxes much more user-friendly. It offers similar features to Select2, such as search and multiple select, but lacks some of the advanced features like remote data loading.

selectize

Selectize is a hybrid of a textbox and a select box. It offers a rich set of features including search, remote data loading, and tagging. It is more flexible than Select2 but can be more complex to configure.

react-select

React-Select is a flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, and AJAX support. It is specifically designed for React applications, making it a better choice for React developers compared to Select2.

README

Select2

Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

To get started, checkout examples and documentation at http://ivaynberg.github.com/select2

Use cases

• Enhancing native selects with search.
• Enhancing native selects with a better multi-select interface.
• Loading data from JavaScript: easily load items via ajax and have them searchable.
• Nesting optgroups: native selects only support one level of nested. Select2 does not have this restriction.
• Tagging: ability to add new items on the fly.
• Working with large, remote datasets: ability to partially load a dataset based on the search term.
• Paging of large datasets: easy support for loading more pages when the results are scrolled to the end.
• Templating: support for custom rendering of results and selections.

Browser compatibility

• IE 8+
• Chrome 8+
• Firefox 10+
• Safari 3+
• Opera 10.6+

Usage

You can source Select2 directly from a CDN like JSDliver, download it from this GitHub repo, or use one of the integrations below.

Integrations

• Wicket-Select2 (Java / Apache Wicket)
• select2-rails (Ruby on Rails)
• AngularUI (AngularJS)
• Django
• Symfony
• Symfony2
• Bootstrap 2 and Bootstrap 3 (CSS skins)
• Meteor (modern reactive JavaScript framework; + Bootstrap 3 skin)
• Meteor
• Yii 2.x
• Yii 1.x
• AtmosphereJS

Example Integrations

• Knockout.js
• Socket.IO
• PHP
• [.Net MVC] (https://github.com/ivaynberg/select2/wiki/.Net-MVC-Example)

Internationalization (i18n)

Select2 supports multiple languages by simply including the right language JS file (select2_locale_it.js, select2_locale_nl.js, etc.) after select2.js.

Missing a language? Just copy select2_locale_en.js.template, translate it, and make a pull request back to Select2 here on GitHub.

Documentation

The documentation for Select2 is available through GitHub Pages and is located within this repository in the gh-pages branch.

Bug tracker

Have a bug? Please create an issue here on GitHub!

https://github.com/ivaynberg/select2/issues

Mailing list

Have a question? Ask on our mailing list!

[e-mail]

https://groups.google.com/d/forum/select2

Copyright and license

Copyright 2012 Igor Vaynberg

This software is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU General Public License version 2 (the "GPL License"). You may choose either license to govern your use of this software only upon the condition that you accept all of the terms of either the Apache License or the GPL License.

You may obtain a copy of the Apache License and the GPL License in the LICENSE file, or at:

http://www.apache.org/licenses/LICENSE-2.0 http://www.gnu.org/licenses/gpl-2.0.html

Unless required by applicable law or agreed to in writing, software distributed under the Apache License or the GPL License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the Apache License and the GPL License for the specific language governing permissions and limitations under the Apache License and the GPL License.