Autocomplete

A text input that filters and suggests matching options from a list as the user types, with support for grouping, icons, and grid layouts.

@delego

byappica-dev

"use client";

import {
  Autocomplete,
  AutocompleteInput,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteList,
  AutocompleteItem,
  AutocompleteGroup,
  AutocompleteLabel,
  AutocompleteCollection,
} from "@/components/ui/autocomplete";

interface ProduceGroup {
  value: string;
  items: string[];
}

const groups: ProduceGroup[] = [
  {
    value: "Fruits",
    items: [
      "Apple",
      "Banana",
      "Cherry",
      "Grapefruit",
      "Mango",
      "Orange",
      "Strawberry",
    ],
  },
  {
    value: "Vegetables",
    items: [
      "Broccoli",
      "Carrot",
      "Cucumber",
      "Lettuce",
      "Potato",
      "Spinach",
      "Tomato",
    ],
  },
  {
    value: "Herbs",
    items: ["Basil", "Mint", "Oregano", "Parsley", "Rosemary", "Thyme"],
  },
];

export default function AutocompleteGrouped() {
  return (
    <div className="w-full max-w-70">
      <Autocomplete items={groups}>
        <AutocompleteInput
          placeholder="Search produce"
          aria-label="Search produce"
        />
        <AutocompleteContent>
          <AutocompleteEmpty>No produce found.</AutocompleteEmpty>
          <AutocompleteList>
            {(group: ProduceGroup) => (
              <AutocompleteGroup key={group.value} items={group.items}>
                <AutocompleteLabel>{group.value}</AutocompleteLabel>
                <AutocompleteCollection>
                  {(item: string) => (
                    <AutocompleteItem key={item} value={item}>
                      {item}
                    </AutocompleteItem>
                  )}
                </AutocompleteCollection>
              </AutocompleteGroup>
            )}
          </AutocompleteList>
        </AutocompleteContent>
      </Autocomplete>
    </div>
  );
}