base on Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Select2 ======= ![Build Status][github-actions-image] [](https://opencollective.com/select2) [][jsdelivr] [][cdnjs] Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results. To get started, check out examples and documentation at https://select2.org/ 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 nesting. 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 [jsDelivr][jsdelivr] or [cdnjs][cdnjs], [download it from this GitHub repo][releases], or use one of the integrations below. Integrations ------------ Third party developers have created plugins for platforms which allow Select2 to be integrated more natively and quickly. For many platforms, additional plugins are not required because Select2 acts as a standard `<select>` box. Plugins * [Backdrop CMS][backdrop-cms] - [backdrop-select2] * [Django] - [django-autocomplete-light] - [django-easy-select2] - [django-select2] * [Drupal] - [drupal-select2] * [Meteor] - [meteor-select2] * [Ruby on Rails][ruby-on-rails] - [select2-rails] * [Wicket] - [wicketstuff-select2] * [Yii 2][yii2] - [yii2-widget-select2] * [Angularjs][angularjs] - [mdr-angular-select2] Themes - [Bootstrap 3][bootstrap3] - [select2-bootstrap-theme] - [Bootstrap 4][bootstrap4] - [select2-bootstrap4-theme] - [Bootstrap 5](https://getbootstrap.com/docs/5.0) - [select2-bootstrap-5-theme](https://github.com/apalfrey/select2-bootstrap-5-theme) - [Flat UI][flat-ui] - [select2-flat-theme] Missing an integration? Modify this `README` and make a pull request back here to Select2 on GitHub. 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 [online at the documentation website][documentation] and is located within the [`docs` directory of this repository][documentation-directory]. Community --------- You can find out about the different ways to get in touch with the Select2 community at the [Select2 community page][community]. Copyright and license --------------------- The license is available within the repository in the [LICENSE][license] file. Contributors ------------ ### Code Contributors This project exists thanks to all the people who contribute. [[Contribute](.github/CONTRIBUTING.md)]. <a href="https://github.com/select2/select2/graphs/contributors"><img src="https://opencollective.com/select2/contributors.svg?width=890&button=false" /></a> ### Financial Contributors Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/select2/contribute)] #### Individuals <a href="https://opencollective.com/select2"><img src="https://opencollective.com/select2/individuals.svg?width=890"></a> #### Organizations Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/select2/contribute)] <a href="https://opencollective.com/select2/organization/0/website"><img src="https://opencollective.com/select2/organization/0/avatar.svg"></a> <a href="https://opencollective.com/select2/organization/1/website"><img src="https://opencollective.com/select2/organization/1/avatar.svg"></a> <a href="https://opencollective.com/select2/organization/2/website"><img src="https://opencollective.com/select2/organization/2/avatar.svg"></a> <a href="https://opencollective.com/select2/organization/3/website"><img src="https://opencollective.com/select2/organization/3/avatar.svg"></a> <a href="https://opencollective.com/select2/organization/4/website"><img src="https://opencollective.com/select2/organization/4/avatar.svg"></a> <a href="https://opencollective.com/select2/organization/5/website"><img src="https://opencollective.com/select2/organization/5/avatar.svg"></a> <a href="https://opencollective.com/select2/organization/6/website"><img src="https://opencollective.com/select2/organization/6/avatar.svg"></a> <a href="https://opencollective.com/select2/organization/7/website"><img src="https://opencollective.com/select2/organization/7/avatar.svg"></a> <a href="https://opencollective.com/select2/organization/8/website"><img src="https://opencollective.com/select2/organization/8/avatar.svg"></a> <a href="https://opencollective.com/select2/organization/9/website"><img src="https://opencollective.com/select2/organization/9/avatar.svg"></a> [cdnjs]: http://www.cdnjs.com/libraries/select2 [community]: https://select2.org/getting-help [documentation]: https://select2.org [documentation-directory]: https://github.com/select2/select2/tree/develop/docs [freenode]: https://freenode.net/ [github-actions-image]: https://github.com/select2/select2/workflows/CI/badge.svg [jsdelivr]: https://www.jsdelivr.com/package/npm/select2 [license]: LICENSE.md [releases]: https://github.com/select2/select2/releases [angularjs]: https://angularjs.org/ [backdrop-cms]: https://backdropcms.org/ [backdrop-select2]: https://backdropcms.org/project/select2 [bootstrap3]: https://getbootstrap.com/ [bootstrap4]: https://getbootstrap.com/ [django]: https://www.djangoproject.com/ [django-autocomplete-light]: https://github.com/yourlabs/django-autocomplete-light [django-easy-select2]: https://github.com/asyncee/django-easy-select2 [django-select2]: https://github.com/codingjoe/django-select2 [drupal]: https://www.drupal.org/ [drupal-select2]: https://www.drupal.org/project/select2 [flat-ui]: http://designmodo.github.io/Flat-UI/ [mdr-angular-select2]: https://github.com/modulr/mdr-angular-select2 [meteor]: https://www.meteor.com/ [meteor-select2]: https://github.com/nate-strauser/meteor-select2 [ruby-on-rails]: http://rubyonrails.org/ [select2-bootstrap-theme]: https://github.com/select2/select2-bootstrap-theme [select2-bootstrap4-theme]: https://github.com/ttskch/select2-bootstrap4-theme [select2-flat-theme]: https://github.com/techhysahil/select2-Flat_Theme [select2-rails]: https://github.com/argerim/select2-rails [vue.js]: http://vuejs.org/ [select2-vue]: http://vuejs.org/examples/select2.html [wicket]: https://wicket.apache.org/ [wicketstuff-select2]: https://github.com/wicketstuff/core/tree/master/select2-parent [yii2]: http://www.yiiframework.com/ [yii2-widget-select2]: https://github.com/kartik-v/yii2-widget-select2 ", Assign "at most 3 tags" to the expected json: {"id":"9778","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"