Select2 component for DerbyJS
This is a DerbyJS component for jQuery Select2 4.0.
It features some improved usability, and it adds support for
- re-ordering multi-selections with drag&drop using Sortable
- allowing to select an item repeatedly in multi-selection mode
- supports ES6 and is written in ES6
The html-structure is exactly identical to the jQuery Select2 component, so styles can be simply reused. You will still most likely recognize the resemblance to the original jQuery Select2 code, but using Derby, much less code is required.
npm install derby-select2
In your app
// Use component published as moduleapp;
In your template
There are five main components that make up Select2:
- "core" is the main view, parent of all others
- "results" is the contents of the dropdown and shows the selectable items.
- "selection/multiple" and "selection/single" are the selection views: they show what has already been selected
- "search" is used to filter the results (by dropdown and multiple)
The views can be configured using the following options:
selectionAdapter: string; the name of a DerbyJS view (component) that is to be used as selection view
resultsAdapter: string; the name of a DerbyJS view (component) that should display the selectable items
selectionAdapter and the
resultsAdapter, will get an
item attribute (not normalized) passed.
If you need to pass and get more data, make the view a component and get the data from the options you passed
to Select2 by calling
The model is set up using a data adapter; it is configured using:
dataAdapter: class; a simple EventEmitter class, needs to set up the model and normalization. And, a data adapter filters according to query arguments (paging) and a model path (filtering).
- "data": an array with all possible selectable items
- "value": where to store the array with the selected item(s)
- "options": where all the Select2 options are stored
model paths for internal Select2 use:
- focus (bool): true if Select2 has focus
- open (bool): true if dropdown open
- results (array): filtered and sorted selectable items to show in dropdown
- selections (array): selected items
- highlighted: the currently highlighted item (replaces results:focus event)
The events that can be emitted are:
- open, close, query, queryEnd, select, move, unselect, focus, blur, disable, enable
- opening, closing, selecting, unselecting
- results:select, results:toggle, results:previous, results:next, results:first, results:last
opening the dropdown emits "query"
"query" starts getting the data from the dataAdapter - if no query is necessary, "queryEnd" is emitted right away
"query" opens the dropdown
query adds "loading" message
queryEnd removes "loading" message
The (default) model data adapter sets up the following references:
data -> results Takes the items from model path "data" (array) and normalizes, filters, and sorts it to "results" (array).
data -> value On select/move/unselect events it copies or moves the item of the event to value, or deletes the item from value.
value -> selections Takes input from model path "value" and normalizes it to "selections".
Normalization is internal to Select2, and it means how to get those attributes:
"results" contains normalized items and is thus an array of objects with this structure:
data:item: <original item>id: itemidtitle: itemtitletext: itemtextchildren: itemchildrendisabled: itemdisabledselected: true/false
Differences to jQuery Select2
There is no original $element anymore that needs the events relayed to.
no SelectAdapter, no ArrayAdapter
I don't think a SelectAdapter makes sense in case of DerbyJS, neither does the ArrayAdapter. Why would you create options from some data and then convert the options back to data? And an array can be passed using the model.
Copyright (c) 2015-2016, 2019 Michael Brade