aldeed:autoform-select2
An add-on Meteor package for aldeed:autoform. Provides a single custom input type, "select2", which renders an input using the select2 plugin.
Prerequisites
Select2 Library
Starting with v2.0.0 of this package, you must use select2 4.0+. You can add this to <head>:
1<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.1/css/select2.min.css" rel="stylesheet" /> 2<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.1/js/select2.min.js"></script>
Or get the files from GitHub and add them directly in your app /client/lib folder.
AutoForm
In a Meteor app directory, enter:
$ meteor add aldeed:autoform
Select2 Bootstrap CSS (optional)
If using with bootstrap, you'll probably also want to:
$ meteor add zimme:select2-bootstrap3-css
Or add the CSS directly to your app /client folder.
Installation
In a Meteor app directory, enter:
$ meteor add aldeed:autoform-select2
Usage
Specify "select2" for the type attribute of any input. This can be done in a number of ways:
In the schema, which will then work with a quickForm or afQuickFields:
1{ 2 tags: { 3 type: [String], 4 autoform: { 5 type: "select2", 6 afFieldInput: { 7 multiple: true 8 } 9 } 10 } 11}
Or on the afFieldInput component or any component that passes along attributes to afFieldInput:
1{{> afQuickField name="tags" type="select2" multiple=true}} 2 3{{> afFormGroup name="tags" type="select2" multiple=true}} 4 5{{> afFieldInput name="tags" type="select2" multiple=true}}
Setting Select2 Options
To 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.
Example:
1{{> afFieldInput name="tags" type="select2" multiple=true select2Options=s2Opts}}
1Template.example.helpers({ 2 s2Opts: function () { 3 return {placeholder: 'foo', tags: true}; 4 } 5});
Demo
Contributing
Anyone is welcome to contribute. Fork, make your changes, and then submit a pull request.
