Autocomplete

Autocomplete unterstützt bei der Texteingabe durch kontextbezogene Vorschläge. Die Auswahl ist optional, eigene Eingaben bleiben möglich. Typischerweise wird die Component mit TextField oder SearchField kombiniert.
GitHubMarkdown

Grundlagen

Autocomplete dient dazu, Usern beim Ausfüllen von Texteingabefeldern durch Vorschläge zu unterstützen. Während der Eingabe werden relevante Optionen angezeigt, aus denen ausgewählt werden kann. Die Auswahl eines Vorschlags ist optional, User können auch eigene Eingaben vornehmen. Autocomplete wird typischerweise in Kombination mit Components wie TextField oder SearchField eingesetzt.

Best Practices

Achte bei der Verwendung von Autocomplete darauf, dass ...

  • die Vorschläge kontextbezogen sind.
  • die Vorschlagsliste bei Bedarf sinnvoll vorgefiltert werden kann (z. B. anhand von Kategorien oder Kontext).
  • bei leerem Eingabefeld zunächst keine Vorschläge angezeigt werden.

Verwendung

Verwende ein Autocomplete, um ...

  • die Effizienz bei der Dateneingabe zu verbessern, insbesondere bei bekannten oder häufig genutzten Optionen.
  • Tippfehler zu vermeiden und die Datenqualität zu erhöhen.
  • lange Auswahlmenüs zu vermeiden, indem Vorschläge dynamisch gefiltert werden.

Autocomplete vs. ComboBox

Autocomplete und ComboBoxen sehen oft ähnlich aus, erfüllen aber unterschiedliche Zwecke.

Verwende Autocomplete, um z. B. ...

  • Usern zu ermöglichen, freie Eingaben zu machen, während Vorschläge zur Auswahl angezeigt werden.
  • bei langen oder dynamischen Datenlisten (z. B. Städte, Usernamen, Tags).

Verwende ComboBox, um z. B. ...

  • aus einer vordefinierten Liste von Optionen eine Auswahl zu treffen.
  • bei bekannten, überschaubaren Optionen (z. B. Sprachen, Kategorien, Geschlecht).

Playground

Lege <Autocomplete />, um ein TextField oder ein SearchField, um Texteigaben mit Vorschlägen zu unterstützen.

import {
  Option,
  Label,
  TextField,
  Autocomplete,
} from "@mittwald/flow-react-components";
import { useState } from "react";

export default () => {
  const [input, setInput] = useState("");

  const generateSuggestItems = () => {
    return [
      "example.com",
      "test.org",
      "email.net",
      "mail.com",
    ]
      .map((d) => {
        const email = `${input.split("@")[0]}@${d}`;
        return (
          <Option
            key={email}
            value={email}
            textValue={email}
          >
            {email}
          </Option>
        );
      })
      .filter(() => input);
  };

  return (
    <Autocomplete>
      <TextField value={input} onChange={setInput}>
        <Label>Email</Label>
      </TextField>
      {generateSuggestItems()}
    </Autocomplete>
  );
}

Benutzerdefinierte Filter

Schränke die Optionen, die dem User zur Auswahl stehen mithilfe von Filtern ein.

Kombiniere mit ...

SearchField

Nutze <Autocomplete /> mit einem SearchField, um die User beim Suchen mit Vorschlägen zu unterstützen.

React Hook Form

Weitere Details zur Formularlogik und -validierung findest du in der Component Form (React Hook Form).

Properties

PropertyTypeDefaultDescription
childrenReactNode-
classNamestring-The elements class name.
wrapWithReactElement<unknown, string | JSXElementConstructor<any>>-
refRef<HTMLSpanElement>-Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
keyKey-
slotstring-A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
filter((textValue: string, inputValue: string, node: Node<object>) => boolean)-An optional filter function used to determine if a option should be included in the autocomplete list. Include this if the items you are providing to your wrapped collection aren't filtered by default.
disableAutoFocusFirstbooleanfalseWhether or not to focus the first item in the collection after a filter is performed. Note this is only applicable if virtual focus behavior is not turned off via `disableVirtualFocus`.
disableVirtualFocusbooleanfalseWhether the autocomplete should disable virtual focus, instead making the wrapped collection directly tabbable.

Auf dieser Seite