PatternLab (1.0.18)

Appearance

Select and Select2 Fields ​

Default Select Boxes are replaced via the Select2 Library – Version4.1.0-rc.0. Use the class js-select2 (JS) if you want to use Select2, or just c-select for the look.

  • search is hidden per default, add the attribute data-search to enable it
  • if you want to allow custom options tags, add data-custom-options

Default Version ​

.c-float-container.-has-select > .c-select.js-select2

TIP

Search is hidden per default when initialized by .js-select2

With Search Field in Dropdown ​

.js-select2[data-search]

Multiple Select ​

<select multiple ..

Option Groups ​

optgroup > option ..

Without Select2 ​

.c-select

Light Version ​

.c-float-container.-has-select.-light > .c-select.-light

Disabled Select ​

.c-select[disabled]

Disabled Results ​

<option value='...' disabled>

Hidden Disabled Results ​

.js-select2[data-hide-disabled]

.js-select2.c-select.-is-link[.-small]

Select with Icon ​

.c-float-container.-select.-has-icon > .c-float-container__icon

Select with Info-Tooltip ​

.c-float-container.-input.-has-icon.-icon-right > .c-input.-icon

Select With Inline-Btn ​

AJAX Example (with Search and Clear-Button) ​

TIP

  • allowClear needs a placeholder and placeholder need a corresponding option value (which cannot be an empty string, but can be a single space)
  • Select2 AJAX support: See select2.org/data-sources/ajax
Show Code for AJAX Example
javascript
import {Select} from "./Select";
Select.init();

const $select = $(".js-example");
const mergedSelectOptions = $.extend(true, {}, Select.getOptionsWithTags("Unbekannter Bestandteil"), {
    ajax: {
        url: "https://jsonplaceholder.typicode.com/posts/", // aktuell Dummy-API, gerne auch andere Endpunkte ausprobieren!
        dataType: "json",
        allowClear: true, // always use in combination with data-placeholder attribute on element
        processResults: function (data) {
            /**
             * Wir setzen "text" (also den Text in der Zeile) hier auf den Namen des Elements.
             * Siehe https://select2.org/data-sources/formats
             * Da die Elemente von der Dummy-API ohnehin schon ein Attribut "id" haben, müssen wir das nicht extra setzen.
             */
            data.forEach(resultObj => {
                    resultObj.info = resultObj.body;
                    resultObj.text = resultObj.title;
                    Select.addOptionTagsIfNotExists($select, resultObj);
                }
            );
            return {
                results: data
            };
        }
    }
});

$select.each(function () {
    Select.apply($(this), mergedSelectOptions);
});

Fake Select2 ​

Sonder-PZN *
Für die korrekte Erstellung von Z-Daten und Hash-Code ist die tatsächliche PZN Ihres Bestandteils anzugeben. Hilfstaxen-PZN bzw. Sonder-PZN sind dann anzugeben, wenn Sie einen Bestandteil ohne tatsächliche PZN verwenden.
09999005

Word Wrapping Demo ​

height: auto
height: auto

Settings and API ​

Show API and Settings
  • Form.init() to activate Floating Labels. See Forms Module.
  • Select.init() to apply default settings and initialize select2 on all js-select2 selects.

Use Select.apply($select, options); to apply your own options on a specific select-field. You can also extend the default options.

Available default options are: ​

  • Select.getDefaultOptions() @returns default settings for standard select-dropdowns
  • Select.getOptionsWithSearch() @returns extended settings for select-dropdowns with search
  • Select.getOptionsWithTags(unknownTerm) @returns extended settings for select-dropdowns with search and custom tags, @param {String} unknownTerm - optional parameter that describes the type of the "unknown custom tag" that is added

2026 - Pharma4u