ce38cd5b9c
Up until now, the container could only have a dropdown that was displayed below the container. While this worked well, there are some cases where the dropdown should be displayed above the container. Most notably, this is when the conatainer is displayed towards the bottom of the page, and displaying the dropdown would cause the page to be extended. Because we close the dropdown when the page is scrolled, the user would not be able to access any options that were displayed outside of the viewpoint. Because of the order that events are fired, we attach the handlers for repositioning the dropdown after results are displayed when the container is opened for the first time. This allows it to be registered after the results container registers their events, so the dropdown is repositioned after the results have been displayed. The logic for determining the direction that the dropdown will be shown in is very similar to the positioning code used in Select2 3.x. Unlike previous versions of Select2, a class is used to indicate the direction of the dropdown, even if it is displaying below the container. The themes provided with Select2 have been updated to correctly render the dropdown in both directions. |
||
---|---|---|
dist | ||
docs | ||
src | ||
tests | ||
vendor | ||
.editorconfig | ||
.gitignore | ||
.jshintignore | ||
.jshintrc | ||
.travis.yml | ||
bower.json | ||
component.json | ||
composer.json | ||
CONTRIBUTING.md | ||
Gruntfile.js | ||
LICENSE.md | ||
package.json | ||
README.md | ||
select2.jquery.json |
Select2
Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results.
To get started, checkout examples and documentation at http://ivaynberg.github.io/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 or CDNJS, 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 (Bootstrap 3 skin)
- Meteor
- Yii 2.x
- Yii 1.x
- AtmosphereJS
Internationalization (i18n)
Select2 supports multiple languages by simply including the right language JS
file (dist/js/i18n/it.js
, dist/js/i18n/nl.js
, etc.) after
dist/js/select2.js
.
Missing a language? Just copy src/js/select2/i18n/en.js
, 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 docs folder.
Community
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!
https://groups.google.com/d/forum/select2
IRC channel
Need help implementing Select2 in your project? Ask in our IRC channel!
Network: Freenode (chat.freenode.net
)
Channel: #select2
Web access: https://webchat.freenode.net/?channels=select2
Copyright and license
The license is available within the repository in the LICENSE file.