stinger-soft/select2-bundle

Symfony2 bundle for wrapping the famous select2 jquery plugin by @ivaynberg

Select2 Bundle for Symfony2

Current Version

Select2 4.0.3, _(*1)

Including Bugfix https://github.com/select2/select2/issues/4398#issuecomment-281721604, _(*2)

Installation

Add bundle to your composer.json file

``` js // composer.json, <sub>(*3)</sub>

{ "require": { // ... "stinger-soft/select2-bundle": "dev-master" } }, <sub>(*4)</sub>

### Or, if you prefer, choose a specific version

``` js
// composer.json

{
    "require": {
        // ...
        "stinger-soft/select2-bundle": "4.0.3.1"
    }
}

Add bundle to your application kernel

``` php // app/AppKernel.php, <sub>(*5)</sub>

public function registerBundles() { $bundles = array( // ... new Pinano\Select2Bundle\PinanoSelect2Bundle(), // ... ); }, <sub>(*6)</sub>

### Download the bundle using Composer

``` bash
$ php composer.phar update pinano/select2-bundle

Install assets

Given your server's public directory is named "web", install the public vendor resources, <sub>(*7)</sub>

``` bash $ php app/console assets:install web, <sub>(*8)</sub>

Optionally, use the --symlink attribute to create links rather than copies of the resources

``` bash
$ php app/console assets:install --symlink web

Usage

Once all the resources are in place you can edit any of your twig views or layouts to include the Select2 javascript files., <sub>(*9)</sub>

Select2 optionally supports multiple languages by simply including the right language javascript file (i18n/es.js, i18n/fr.js, etc.) after select2.js. In the following example we are loading the Spanish locale., <sub>(*10)</sub>

Note: Select2 requires the jQuery library., <sub>(*11)</sub>

``` twig {% block javascripts %} {% javascripts ... '@PinanoSelect2Bundle/Resources/public/js/select2.min.js' '@PinanoSelect2Bundle/Resources/public/js/i18n/es.js' ... %} {% endjavascripts %} {% endblock %}, <sub>(*12)</sub>

Then you will want to load the css resources so your select elements look nice:

``` twig
{% block stylesheets %}
    {% stylesheets filter='cssrewrite'
      ...
      'bundles/pinanoselect2/css/select2.css'
      ...
    %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

Note: See https://github.com/kriswallsmith/assetic/issues/53 for known limitations of assetic with CSS referencing., <sub>(*13)</sub>

I usually follow a simple inheritance schema when it comes to designing twig templates. That is, I have an app/Resources/views/base.html.twig file that I use as a site-wide template. Then, inside every bundle I have my own Resources/views/layout.html.twig file that extends the base template. Depending on the kind of application I'm designing I can place the Bootstrap stuff in the site-wide or the bundle-wide template. Then every view of a given bundle will extend the corresponding bundle layout.html.twig file, which in turn extends the site-wide template., <sub>(*14)</sub>

The folks at Sensio Labs have already covered this approach and you can check it in their documentation., <sub>(*15)</sub>

Licenses

I do not own Select2 files at all, I'm just providing a Bundle package to easy-install them all. Refer to the source code of the included files from Select2 for license information., <sub>(*16)</sub>

References

1. https://select2.github.io/
2. http://symfony.com