Formular: Combobox

Das Pattern Combobox kombiniert Texteingabe mit einer Listendarstellung. Nutzer*innen können, entsprechend ihrer Abfrage, aus einer Liste vorgeschlagener Optionen wählen.

Varianten

Formular: Combobox

Die Optionen werden angezeigt, sobald Sie zu tippen beginnen oder die Pfeiltasten betätigen. Die Optionen werden bei Eingabe nicht gefiltert.

Vorschau

Grundlagenerhebung
Konzepterstellung
Widmungsverfahren
Gemeinderatsbeschluss
In Umsetzung
Umgesetzt

Code

<wm-input type="combobox" label="Projektstand">
  <ul slot="options">
    <li data-value="grundlagenerhebung">Grundlagenerhebung</li>
    <li data-value="konzepterstellung">Konzepterstellung</li>
    <li data-value="widmungsverfahren">Widmungsverfahren</li>
    <li data-value="gemeinderatsbeschluss">Gemeinderatsbeschluss</li>
    <li data-value="inumsetzung">In Umsetzung</li>
    <li data-value="umgesetzt">Umgesetzt</li>
  </ul>
</wm-input>

Formular: Combobox mit Button

Button zum Ein- und Ausklappen der Optionen.

Vorschau

Grundlagenerhebung
Konzepterstellung
Widmungsverfahren
Gemeinderatsbeschluss
In Umsetzung
Umgesetzt

Code

<wm-input type="combobox" label="Projektstand" toggleButton>
  <ul slot="options">
    <li data-value="grundlagenerhebung">Grundlagenerhebung</li>
    <li data-value="konzepterstellung">Konzepterstellung</li>
    <li data-value="widmungsverfahren">Widmungsverfahren</li>
    <li data-value="gemeinderatsbeschluss">Gemeinderatsbeschluss</li>
    <li data-value="inumsetzung">In Umsetzung</li>
    <li data-value="umgesetzt">Umgesetzt</li>
  </ul>
</wm-input>

Formular: Combobox mit Button und Filter

Die Optionen werden bei Eingabe gefiltert.

Vorschau

Grundlagenerhebung
Konzepterstellung
Widmungsverfahren
Gemeinderatsbeschluss
In Umsetzung
Umgesetzt

Code

<wm-input type="combobox" label="Projektstand" toggleButton filter>
  <ul slot="options">
    <li data-value="grundlagenerhebung">Grundlagenerhebung</li>
    <li data-value="konzepterstellung">Konzepterstellung</li>
    <li data-value="widmungsverfahren">Widmungsverfahren</li>
    <li data-value="gemeinderatsbeschluss">Gemeinderatsbeschluss</li>
    <li data-value="inumsetzung">In Umsetzung</li>
    <li data-value="umgesetzt">Umgesetzt</li>
  </ul>
</wm-input>

Formular: Combobox mit Filter und Unterteilungen

Lange Listen können gruppiert werden.

Vorschau

Seiten
- Leicht verständliche Sprache
- Domain Policy
Icons
- Bitte nicht lärmen
- Blaulicht
Templates
- Parkpickerl
- Public WLAN

Code

<wm-input type="combobox" toggleButton label="Suche" filter placeholder="Handbuch durchsuchen">
  <ul slot="options">
    <li>
      Seiten
      <ul>
        <li data-value="lvs">Leicht verständliche Sprache</li>
        <li data-value="domain">Domain Policy</li>
      </ul>
    </li>
    <li>
      Icons
      <ul>
        <li data-value="nolaerm">Bitte nicht lärmen</li>
        <li data-value="blaulicht">Blaulicht</li>
      </ul>
    </li>
    <li>
      Templates
      <ul>
        <li data-value="parkpickerl">Parkpickerl</li>
        <li data-value="wlan">Public WLAN</li>
      </ul>
    </li>
  </ul>
</wm-input>

Formular: Combobox Live OGD Adress-Suche

Daten bezogen von https://www.data.gv.at

Vorschau

Code

<p>
  <wm-input type="combobox" label="Adresse" id="ogdsuche" dataset="features"></wm-input>
</p>
<script>
const search = document.querySelector('#ogdsuche');
  search.addEventListener('wm-input', e => {
    search.getOptions(e.detail.value, `https://data.wien.gv.at/daten/OGDAddressService.svc/GetAddressInfo?Address=${e.detail.value}`).then((results) => {
      const options = [];
      if (results) {
        for (let i = 0; i < results.length; i++) {
          const row = results[i];
          options.push({
            text: `${row.properties.Adresse}, ${row.properties. Bezirk}. Bezirk`,
            children: [],
            value: `value-${i}`
          })
        }
        search.setOptions(options);
      }
    });
  });
</script>

Dev

Weitere Beispiele

Formular: Combobox mit Links

Die Liste kann statt Optionen auch Links beinhalten.

Vorschau

alle
Grundlagenerhebung
Konzepterstellung
Widmungsverfahren
Gemeinderatsbeschluss
In Umsetzung
Umgesetzt

Code

<wm-input type="combobox" label="Projektstand" toggleButton="toggleButton">
  <ul slot="options">
    <li>
      <a href="#">
        alle
      </a>
    </li>
    <li>
      <a href="#grundlagenerhebung">
        Grundlagenerhebung
      </a>
    </li>
    <li>
      <a href="#konzepterstellung">
        Konzepterstellung
      </a>
    </li>
    <li>
      <a href="#widmungsverfahren">
        Widmungsverfahren
      </a>
    </li>
    <li>
      <a href="#gemeinderatsbeschluss">
        Gemeinderatsbeschluss
      </a>
    </li>
    <li>
      <a href="#inumsetzung">
        In Umsetzung
      </a>
    </li>
    <li>
      <a href="#umgesetzt">
        Umgesetzt
      </a>
    </li>
  </ul>
</wm-input>

Formular: Input mit Auswahl-Event

Daten bezogen von https://www.data.gv.at

Vorschau

Die ausgewählte Adresse lautet: /

Code

<p>
  <wm-input type="combobox" label="Addresse" id="ogdsucheevent" dataset="features"></wm-input>
</p>
<p>Die ausgewählte Adresse lautet:
  <strong id="selected_address">/</strong>
</p>
<script>
  const searchEvent = document.querySelector('#ogdsucheevent');
  searchEvent.addEventListener('wm-input', e => {
    searchEvent.getOptions(e.detail.value, `https://data.wien.gv.at/daten/OGDAddressService.svc/GetAddressInfo?Address=${
      e.detail.value
    }`).then((results) => {
      const options = [];
      if (results) {
        for (let i = 0; i < results.length; i++) {
          const row = results[i];
          options.push({text: `${
              row.properties.Adresse
            }, ${
              row.properties.Bezirk
            }. Bezirk`, children: [], value: `value-${i}`})
        }
        searchEvent.setOptions(options);
      }
    });
  });
  searchEvent.addEventListener('wm-input-selected', e => {
    document.querySelector('#selected_address').textContent = e.detail.text;
  });
</script>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Input/Input.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Button/Button.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Icon/Icon.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Stack/Stack.js" type="module"></script>

JavaScript

import { Input } from './wienermelange/assets/js/components/Input/Input.js';
    import { Button } from './wienermelange/assets/js/components/Button/Button.js';
    import { Icon } from './wienermelange/assets/js/components/Icon/Icon.js';
    import { Stack } from './wienermelange/assets/js/components/Stack/Stack.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`type`	Art des Eingabefelds	`'combobox'\|'date'\|'datetime-local'\|'email'\|'number'\|'password'\|'tel'\|'text'\|'time'\|'url'`	`"text"`
`dataset`	Combobox: Feld in der Response, das die Daten enthält, zum Beispiel bei OGD üblicherweise "features"	`Boolean`	`""`
`toggleButton`	Button in Combobox anzeigen	`Boolean`	`false`
`setvalue`	Combobox: Wert programmatisch setzen	`Boolean`	`""`
`pattern`	Regulärer Expressen RegEx für die Validierung	`String`	leer
`suppressError`	Unterdrückt die Anzeige von Fehlermeldungen	`Boolean`	`false`
`errormessage`	Fehlermeldung bei ungültiger Eingabe Diese Meldung wird direkt am Eingabefeld angezeigt, wenn es validiert wird und ungültig ist.	`String`	`""`
`summaryErrormessage`	Spezifische Fehlermeldung für die Fehlerübersicht Diese Meldung wird in der Fehlerübersicht (wm-formerrorsummary) anstelle der normalen Fehlermeldung angezeigt. Dies ist nützlich, um in der Übersicht kontextspezifischere Fehlermeldungen anzuzeigen, z.B. "Bitte geben Sie Ihren Namen bei 'Kontaktdaten' ein" statt nur "Dieses Feld ist erforderlich".	`String`	`""`
`_errorController`			`new ErrorStateController(this)`
`validator`		`function`

Methoden

Eigenschaft	Optionen	Argumente
`_handleChange`
`_handleBlur`
`_handleFocus`
`_handleKeyDown`
`_handleKeyUp`
`formResetCallback`	Reset the component to its initial state (called by forms)	/
`reportValidity`		/
`hideOptions`	Liste in Combobox verbergen	Fokus auf Input legen (true) (`Boolean`)
`showError`	Shows an error message for this input	The error message to display (`string`)
`clearError`	Clears any error state from this input	/
`firstUpdated`	Captures initial value from DOM after first render
`updated`	Override of updated lifecycle to handle attribute/property changes
`formDisabledCallback`	Called when the element's form sets the disabled state	Whether the control should be disabled (`boolean`)
`showOptions`	Liste in Combobox anzeigen	/

Events

Event	Beschreibung	Rückgabewert

CSS API

Property	Beschreibung
`--input-combobox-background-color`	Hintergrund Combobox
`--input-combobox-background-color--active`	Hintergrund hervorgehobenes Element

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at