{"id":28740057,"url":"https://github.com/meteor-community-packages/meteor-autoform-select2","last_synced_at":"2025-06-16T06:41:13.613Z","repository":{"id":22800833,"uuid":"26147300","full_name":"Meteor-Community-Packages/meteor-autoform-select2","owner":"Meteor-Community-Packages","description":"Custom select2 input type for AutoForm","archived":false,"fork":false,"pushed_at":"2022-12-31T08:24:38.000Z","size":39,"stargazers_count":25,"open_issues_count":13,"forks_count":29,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-05-11T10:46:15.222Z","etag":null,"topics":["autoform","hacktoberfest","meteor"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Meteor-Community-Packages.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-04T01:31:18.000Z","updated_at":"2023-08-27T05:20:27.000Z","dependencies_parsed_at":"2023-01-13T22:14:43.521Z","dependency_job_id":null,"html_url":"https://github.com/Meteor-Community-Packages/meteor-autoform-select2","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/Meteor-Community-Packages/meteor-autoform-select2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meteor-Community-Packages%2Fmeteor-autoform-select2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meteor-Community-Packages%2Fmeteor-autoform-select2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meteor-Community-Packages%2Fmeteor-autoform-select2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meteor-Community-Packages%2Fmeteor-autoform-select2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Meteor-Community-Packages","download_url":"https://codeload.github.com/Meteor-Community-Packages/meteor-autoform-select2/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meteor-Community-Packages%2Fmeteor-autoform-select2/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260115278,"owners_count":22961027,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autoform","hacktoberfest","meteor"],"created_at":"2025-06-16T06:41:12.533Z","updated_at":"2025-06-16T06:41:13.595Z","avatar_url":"https://github.com/Meteor-Community-Packages.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"aldeed:autoform-select2\n=========================\n\nAn add-on Meteor package for [aldeed:autoform](https://github.com/aldeed/meteor-autoform). Provides a single custom input type, \"select2\", which renders an input using the [select2](https://select2.github.io/) plugin.\n\n## Prerequisites\n\n### Select2 Library\n\nYou must use select2 4.0+.\n\nOption 1:\n\nAdd this to `\u003chead\u003e`:\n\n```html\n\u003clink href=\"//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css\" rel=\"stylesheet\" /\u003e\n\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js\"\u003e\u003c/script\u003e\n```\n\nOption 2:\n\nInstall the NPM package (and its jQuery dependency):\n\n```js\n$ meteor npm i --save jquery select2\n```\n\nThen in your `client/main.js`:\n\n```js\nimport 'select2';\nimport 'select2/dist/css/select2.css';\n```\n\nOption 3:\n\nGet the files from GitHub and add them directly in your app /client/lib folder.\n\n### AutoForm\n\nIn a Meteor app directory, enter:\n\n```bash\n$ meteor add aldeed:autoform\n```\n\n### Select2 Bootstrap CSS (optional)\n\nIf using with Bootstrap, you can add the theme.\n\n```bash\n$ meteor npm i --save select2-bootstrap-theme\n```\n\nAnd add an additional import AFTER the other two in your `client/main.js`:\n\n```js\nimport 'select2';\nimport 'select2/dist/css/select2.css';\nimport 'select2-bootstrap-theme/dist/select2-bootstrap.css';\n```\n\n## Installation\n\nIn a Meteor app directory, enter:\n\n```bash\n$ meteor add aldeed:autoform-select2\n```\n\n## Usage\n\nSpecify \"select2\" for the `type` attribute of any input. This can be done in a number of ways:\n\nIn the schema, which will then work with a `quickForm` or `afQuickFields`:\n\n```js\n{\n  tags: {\n    type: Array,\n    autoform: {\n      type: 'select2',\n      afFieldInput: {\n        multiple: true\n      }\n    }\n  },\n  'tags.$': String\n}\n```\n\nOr on the `afFieldInput` component or any component that passes along attributes to `afFieldInput`:\n\n```html\n{{\u003e afQuickField name=\"tags\" type=\"select2\" multiple=true}}\n\n{{\u003e afFormGroup name=\"tags\" type=\"select2\" multiple=true}}\n\n{{\u003e afFieldInput name=\"tags\" type=\"select2\" multiple=true}}\n```\n\n## Setting Select2 Options\n\nTo provide select2 options, set a `select2Options` attribute equal to a helper function that returns the options object. Most of the `data-` attributes that the plugin recognizes should also work.\n\nExample:\n\n```html\n{{\u003e afFieldInput name=\"tags\" type=\"select2\" multiple=true select2Options=s2Opts}}\n```\n\n```js\nTemplate.example.helpers({\n  s2Opts() {\n    return { placeholder: 'foo', tags: true };\n  },\n});\n```\n\n## Demo\n\n[Live](http://autoform.meteor.com/types)\n\n## Contributing\n\nAnyone is welcome to contribute. Fork, make your changes, and then submit a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeteor-community-packages%2Fmeteor-autoform-select2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeteor-community-packages%2Fmeteor-autoform-select2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeteor-community-packages%2Fmeteor-autoform-select2/lists"}