Components

Appearance

AutoComplete ​

This component depends on third-party component library for Vue 3:

Example Usage ​

Example

Value: []

Normal

Keine Ergebnisse gefunden

With Grouping

Keine Ergebnisse gefunden

Multi Select (Tag List)

Keine Ergebnisse gefunden
vue
<template>
  <p>Value: {{ selectedValue1 }} {{ selectedValue2 }} {{ selectedValue3 }}</p>
  <h2 class="mt-m">Normal</h2>
  <SkAutoComplete
    v-model="selectedValue1"
    :suggestions="reactiveItems"
    placeholder="Thema suchen"
    option-label="label"
    @complete="search"
  />
  <h2 class="mt-m">With Grouping</h2>
  <SkAutoComplete
    v-model="selectedValue2"
    :suggestions="reactiveItems"
    placeholder="Thema auswählen"
    option-label="label"
    option-group-label="label"
    option-group-children="items"
    dropdown
    @complete="search2"
  />
  <h2 class="mt-m">Multi Select (Tag List)</h2>
  <SkAutoComplete
    v-model="selectedValue3"
    :suggestions="reactiveItems"
    placeholder="Suche nach mehreren Themen"
    option-label="label"
    multiple
    fluid
    dropdown
    force-selection
    @complete="search"
  />
</template>

<script setup>
import { ref } from 'vue';

const selectedValue1 = ref();
const selectedValue2 = ref([]);
const selectedValue3 = ref();
const items = [
  {
    label: 'Mathematik',
    items: [
      { label: 'Deutsch', value: 'DE' },
      { label: 'Biologie', value: 'BIO' },
      { label: 'Chemie', value: 'CH' },
      { label: 'Deutsch', value: 'DE' },
      { label: 'Biologie', value: 'BIO' },
      { label: 'Chemie', value: 'CH2' },
    ],
  },
];
const reactiveItems = ref([]);

const search = (event) => {
  reactiveItems.value = items[0].items.filter((el) =>
    el.label.toLowerCase().includes(event.query.toLowerCase())
  );
  if (reactiveItems.value.length === 0) {
    reactiveItems.value.push({ label: event.query, value: '+' });
  }
};

const search2 = () => {
  reactiveItems.value = items;
};
</script>