Skip to content
Get packs

Guide · Open source

How to use Select2: install, search and load remote data

Updated · written with AI from the project's own documentation and checked against our catalogue data

Select2 is a JavaScript component that replaces the standard select box on a web page with a version that supports search, remote data sets and infinite scrolling of results. It is built on jQuery, so it is aimed at web developers who already use that library. After this guide you will know what Select2 needs, where to get it, which features it covers and how to choose between a plain dropdown and Select2.

Select2select2/select2 · ★ 25.9k · MIT

Quick start

  1. 1Check for jQuery. Confirm the page already loads jQuery or add it before Select2.
  2. 2Get Select2. Load it from jsDelivr or cdnjs, download it from the GitHub releases page, or clone the repository.
  3. 3Include the script. Add dist/js/select2.js after jQuery in your page.
  4. 4Initialise on a select box. Call Select2 on the select element you want to enhance, using the documentation at select2.org.
  5. 5Add optional features. Enable search, multi-select, tagging or AJAX loading as your form needs.
  6. 6Add a language file if needed. Include the matching file from dist/js/i18n after select2.js.

What Select2 needs before you start

Select2 is built on jQuery, and the README lists jQuery as a prerequisite. Plan to include jQuery on the page before you load Select2.

Select2 is a JavaScript component for web pages. You need to be able to edit the HTML and JavaScript of the site or application where you want to use it.

  • jQuery loaded on the page
  • Access to the page's HTML and JavaScript

Get Select2 from a CDN or the repository

The README says you can source Select2 directly from a CDN such as jsDelivr or cdnjs, download it from the GitHub releases page, or use one of the integrations listed. If you want the source code, you can clone the repository.

The README gives this command to clone the repository:

  • CDN: jsDelivr or cdnjs
  • Download: the releases page on GitHub
  • Clone the repository for the source
git clone https://github.com/select2/select2.git

Add Select2 to a page

The README says Select2 can be used by including the right JavaScript file after dist/js/select2.js. Load jQuery first, then Select2, then your own code that calls it.

Select2 acts as a standard select box, so the usual select element in your HTML is the starting point.

  • Include jQuery first
  • Include dist/js/select2.js after it
  • Call Select2 on your select element from your own script

Use the main features: search, multi-select and tagging

According to the README, Select2 can add search to native selects, provide a better multi-select interface and allow new items to be added on the fly (tagging). It can also nest optgroups, which native selects do not support beyond one level.

Templating lets you customise how results and selections are rendered.

  • Search inside long option lists
  • Multi-select interface
  • Tagging: add new items on the fly
  • Nested optgroups
  • Custom rendering of results and selections

Load options from a server with AJAX

The README lists loading data from JavaScript with AJAX and working with large remote datasets, where a partial dataset is loaded based on the search term. Paging is also supported, so more results load when the results are scrolled to the end.

The README does not show the configuration code for these features, so check the documentation website linked from the project for the exact settings.

  • Load items via AJAX and make them searchable
  • Load a partial dataset based on the search term
  • Load more pages when results reach the end

Add another language

Select2 supports multiple languages. Include the matching language file after dist/js/select2.js. The README gives dist/js/i18n/it.js and dist/js/i18n/nl.js as examples. If your language is missing, the README suggests copying src/js/select2/i18n/en.js, translating it and opening a pull request.

  • Example files: dist/js/i18n/it.js, dist/js/i18n/nl.js
  • Missing language: copy src/js/select2/i18n/en.js and translate it

Use an integration or theme

The README lists third party plugins for platforms such as Django, Drupal, Ruby on Rails, Yii 2 and others, plus themes for Bootstrap 3, 4 and 5 and Flat UI. For many platforms, extra plugins are not needed because Select2 acts as a standard select box.

Check each plugin's own project page before you use it, since the README only links to them.

  • Plugins for Django, Drupal, Ruby on Rails, Yii 2, Angularjs and others
  • Themes for Bootstrap 3, 4 and 5, and Flat UI

What people use it for

  • Searchable country or region list in a long form
  • Multi-select for choosing tags or categories
  • Dropdown that loads matching results from a server as the user types
  • Tagging input where users can add new items on the fly
  • Site built on a CMS or framework that has a Select2 plugin

Frequently asked questions

Is Select2 free to use?

Select2 is released under the MIT licence. The full licence text is in the LICENSE file in the repository. Check that file if you need the exact terms.

Do I need jQuery to use Select2?

Yes. The README says Select2 is a jQuery-based replacement for select boxes and lists jQuery as a prerequisite. The README does not describe a version that works without jQuery.

How do I install Select2?

The README says you can load it from a CDN such as jsDelivr or cdnjs, download it from the GitHub releases page, or clone the repository with git clone https://github.com/select2/select2.git. Use the method that fits your project.

Can Select2 load options from a server?

Yes. The README says Select2 can load items via AJAX, search remote datasets and load more pages as results are scrolled. The exact setup is in the documentation at select2.org.

What browsers does Select2 support?

The README lists IE 8+, Chrome 8+, Firefox 10+, Safari 3+ and Opera 10.6+. Test your own site in the browsers your users run.

What are the alternatives to Select2?

Comparable projects include Choices.js, Tom Select and selectize.js. Compare their features and dependencies against your needs before choosing.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Select2 suits web developers who already use jQuery and need search, remote data or tagging in a dropdown. If your project does not use jQuery, or a plain native select box is enough, use a different tool or the standard select element.

Install options & downloads