Autocomplete

npm install @kuzenbo/core

import { Autocomplete } from "@kuzenbo/core";

const suggestions = [
  "Apple",
  "Banana",
  "Cherry",
  "Date",
  "Elderberry",
];

function Example() {
  return (
    <Autocomplete>
      <Autocomplete.Label>Fruit</Autocomplete.Label>
      <Autocomplete.Row>
        <Autocomplete.Input placeholder="Type to search..." />
        <Autocomplete.Trigger />
      </Autocomplete.Row>
      <Autocomplete.Portal>
        <Autocomplete.Positioner>
          <Autocomplete.Popup>
            <Autocomplete.Content>
              <Autocomplete.List>
                <Autocomplete.Empty>No results found.</Autocomplete.Empty>
                <Autocomplete.Collection items={suggestions}>
                  {(item) => (
                    <Autocomplete.Item value={item}>
                      {item}
                    </Autocomplete.Item>
                  )}
                </Autocomplete.Collection>
              </Autocomplete.List>
            </Autocomplete.Content>
          </Autocomplete.Popup>
        </Autocomplete.Positioner>
      </Autocomplete.Portal>
    </Autocomplete>
  );
}

const { useFilter, useFilteredItems } = Autocomplete;

function FilteredAutocomplete() {
  const filter = useFilter({ sensitivity: "base" });
  const filteredItems = useFilteredItems(items, filter);

  return (
    <Autocomplete>
      {/* ... */}
      <Autocomplete.Collection items={filteredItems}>
        {(item) => <Autocomplete.Item value={item}>{item}</Autocomplete.Item>}
      </Autocomplete.Collection>
    </Autocomplete>
  );
}

<Autocomplete.List>
  <Autocomplete.Group>
    <Autocomplete.GroupLabel>Recent</Autocomplete.GroupLabel>
    <Autocomplete.Item value="recent-1">Recent Item 1</Autocomplete.Item>
    <Autocomplete.Item value="recent-2">Recent Item 2</Autocomplete.Item>
  </Autocomplete.Group>
  <Autocomplete.Separator />
  <Autocomplete.Group>
    <Autocomplete.GroupLabel>All Items</Autocomplete.GroupLabel>
    <Autocomplete.Item value="item-1">Item 1</Autocomplete.Item>
    <Autocomplete.Item value="item-2">Item 2</Autocomplete.Item>
  </Autocomplete.Group>
</Autocomplete.List>

<Autocomplete.Row>
  <Autocomplete.Input placeholder="Type to search..." />
  <Autocomplete.Clear />
  <Autocomplete.Trigger />
</Autocomplete.Row>