PatternLab (0.1.505)

Appearance

Select and Select2 Fields ​

TIP

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

::: demo

:::

With Search Field in Dropdown ​

.js-select2[data-search]

::: demo

:::

Multiple Select ​

<select multiple .. ::: demo

:::

Option Groups ​

optgroup > option .. ::: demo

:::

Without Select2 ​

.c-select ::: demo

:::

Light Version ​

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

:::

Disabled Select ​

.c-select[disabled] ::: demo

:::

Disabled Results ​

<option value='...' disabled> ::: demo

:::

Hidden Disabled Results ​

.js-select2[data-hide-disabled] ::: demo

:::

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

:::

Select with Icon ​

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

:::

Select with Info-Tooltip ​

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

:::

Select With Inline-Btn ​

::: demo

:::

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
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);
// });

::: demo

:::

Fake Select2 ​

::: demo

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 ​

::: demo

height: auto
height: auto
:::

Settings and API ​

TIP

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
javascript
const settings = {
    selector: {
        selectField: ".js-select2",
        searchField: ".select2-search__field"
    },
    class: {
        jsClass: "js-select2",
        defaultClass: "c-select",
        isDisabled: "-disabled",
        hideDisabledOptions: '-hide-disabled-options',
        hiddenAccessible: "select2-hidden-accessible"
    }
};

2025 - Pharma4u