https://github.com/andreivictor/select2-customselectionadapter

An implementation of a custom selection adapter for the Select2 plugin (v4) - multiple mode. Displays the selected tags into a separate section, leaving the search box empty.
https://github.com/andreivictor/select2-customselectionadapter

select2

Last synced: 23 days ago
JSON representation

An implementation of a custom selection adapter for the Select2 plugin (v4) - multiple mode. Displays the selected tags into a separate section, leaving the search box empty.

• Host: GitHub
• URL: https://github.com/andreivictor/select2-customselectionadapter
• Owner: andreivictor
• License: mit
• Created: 2019-05-03T06:30:03.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T03:40:48.000Z (over 1 year ago)
• Last Synced: 2024-05-21T06:13:35.633Z (6 months ago)
• Topics: select2
• Language: JavaScript
• Homepage: https://andreivictor.github.io/select2-customSelectionAdapter/
• Size: 666 KB
• Stars: 7
• Watchers: 1
• Forks: 10
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# select2-customSelectionAdapter

An implementation of a custom selection adapter for the Select2 plugin (v4) - multiple mode. Displays the selected tags into a separate section, leaving the search box empty.

![img](https://imgur.com/trAkGul.png)

## Demo ##

https://andreivictor.github.io/select2-customSelectionAdapter/. 

## Usage ##

Initialize the select2 plugin with the `selectionAdapter` option. 

```javascript

var CustomSelectionAdapter = $.fn.select2.amd.require("select2/selection/customSelectionAdapter");

$("select").select2({

    // options 

    selectionAdapter: CustomSelectionAdapter

});

```

## Setup ##

Include the script after Select2 main javascript file:

```html

```

Include the css file:

```html

```

## `selectionContainer` Option ##

By default, the tags are added immediately after the `select2` container.

You can use the `selectionContainer` option to add them somewhere else in the page.

```javascript

var CustomSelectionAdapter = $.fn.select2.amd.require("select2/selection/customSelectionAdapter");

$("select").select2({

    // options 

    selectionAdapter: CustomSelectionAdapter,

    selectionContainer: $('.foo')

});

```

## Select2 compatibility ##

- Select2 4+

## Copyright and license ##

The license is available within the repository in the [LICENSE](LICENSE) file.