Meteor Community Logo

Meteor Community

Packosphere

undefined's Avatar

aldeed:autoform-select2

v3.0.0•Published 7 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

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

You must use select2 4.0+.

Option 1:

Add this to <head>:

1<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
2<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

Option 2:

Install the NPM package (and its jQuery dependency):

1$ meteor npm i --save jquery select2

Then in your client/main.js:

1import 'select2';
2import 'select2/dist/css/select2.css';

Option 3:

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 can add the theme.

$ meteor npm i --save select2-bootstrap-theme

And add an additional import AFTER the other two in your client/main.js:

1import 'select2';
2import 'select2/dist/css/select2.css';
3import 'select2-bootstrap-theme/dist/select2-bootstrap.css';

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: Array,
4    autoform: {
5      type: 'select2',
6      afFieldInput: {
7        multiple: true
8      }
9    }
10  },
11  'tags.$': String
12}

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() {
3    return { placeholder: 'foo', tags: true };
4  },
5});

Demo

Live

Contributing

Anyone is welcome to contribute. Fork, make your changes, and then submit a pull request.