import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as AutocompleteStories from "./src/autocomplete.stories"; import packageInfo from "./package.json";

Autocomplete

Version {packageInfo.version}

Showcase

Properties

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"

In MyApp.tsx

import "@purpurds/purpur/styles";

Examples

In MyComponent.tsx

With uncontrolled input (using Purpur TextField)

import { Autocomplete, Option, TextField } from "@purpurds/purpur";
import { useState } from "React";

export const MyComponent = () => {
  const options: Options[] = [
    /* Your options */
  ];
  const [selectedOption, setSelectedOption] = useState<Option>();

  return (
    <Autocomplete
      id="autocomplete"
      listboxLabel="Label for listbox, for a11y (describe the options)"
      selectedOption={selectedOption}
      onSelect={selectedOption}
      options={options}
      selectedOption
      renderInput={(inputProps) => (
        <TextField
          {...inputProps}
          label="Text Field"
          id="autocomplete-input"
          type="text"
          placeholder="Write something"
        />
      )}
    />
  );
};

With controlled input (using Purpur SearchField)

import { Autocomplete, Option, SearchField } from "@purpurds/purpur";
import { useState } from "React";

export const MyComponent = () => {
  const options: Options[] = [
    /* Your options */
  ];
  const [selectedOption, setSelectedOption] = useState<Option>();
  const [inputValue, setInputValue] = useState("");

  return (
    <Autocomplete
      id="autocomplete"
      listboxLabel="Label for listbox, for a11y (describe the options)"
      selectedOption={selectedOption}
      onSelect={selectedOption}
      options={options}
      selectedOption
      onInputChange={setInputValue}
      inputValue={inputValue}
      renderInput={(inputProps) => (
        <SearchField
          {...inputProps}
          label="Text Field"
          id="autocomplete-input"
          type="text"
          placeholder="Write something"
          onClear={() => setInputValue("")}
          clearButtonAllyLabel="Rensa sökfältet"
          variant="button-attached"
          iconOnlySearchButton
          searchButtonLabel="Search"
        />
      )}
    />
  );
};

With controlled input & with renderOption function (using Purpur TextField)

Highlight parts of the option labels that are matching the input value

import { Autocomplete, Option, Paragraph, TextField } from "@purpurds/purpur";
import { useState } from "React";

export const MyComponent = () => {
  const options: Options[] = [
    /* Your options */
  ];
  const [inputValue, setInputValue] = useState("");
  const [selectedOption, setSelectedOption] = useState<Option>();

  function renderOption(option: Option) {
    const optionText = option.label;
    if (!inputValue.trim()) {
      return optionText;
    }

    const escapeRegExp = (str = "") => str.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
    const regex = new RegExp(`(${escapeRegExp(inputValue)})`, "gi");
    const parts = optionText.split(regex);

    return (
      <Paragraph>
        {parts
          .filter((part) => part)
          .map((part, i) =>
            regex.test(part) ? <strong key={i}>{part}</strong> : <span key={i}>{part}</span>
          )}
      </Paragraph>
    );
  }

  return (
    <Autocomplete
      id="autocomplete"
      listboxLabel="Label for listbox, for a11y (describe the options)"
      selectedOption={selectedOption}
      onSelect={setSelectedOption}
      onInputChange={setInputValue}
      inputValue={inputValue}
      renderOption={renderOption}
      options={options}
      renderInput={(inputProps) => (
        <TextField {...inputProps} label="With renderOption" id="autocomplete-input" type="text" />
      )}
    />
  );
};