AutoComplete

Many auxiliary grid functions rely on the ability to search for items by text, e.g., the in filter expressions of the Grid. Graphite Grid provides a fully featured AutoComplete component for such cases.

The AutoComplete component provided by Graphite Grid may be used for any search and select functionality and is not grid-specific. It is included in the Graphite Grid package to ease the development of components that work with the Grid. If your UI library provides similar functionality, you can use that library's AutoComplete component instead of the one offered by Graphite Grid.

The example below shows the AutoComplete component in action, styled using Tailwindcss.

import { AutoComplete } from "@1771technologies/graphite-grid-react";
 
const greekAlphabet: string[] = [
  "Alpha",
  "Beta",
  "Gamma",
  // ... remaining alphabet
];
 
export function AutoCompleteDemo() {
  return (
    <div className="">
      <AutoComplete<string>
        placeholder="Search..."
        itemRenderer={(params) => {
          return (
            <div
              className={cn(
                "flex items-center p-2",
                params.active && "dark:bg-indigo-800 bg-indigo-200",
              )}
            >
              {params.item}
            </div>
          );
        }}
        containerClassName="bg-background border border-solid border-input"
        getItemsForQuery={(q) =>
          greekAlphabet.filter((c) => c.toLowerCase().includes(q.toLowerCase()))
        }
        itemToKey={(q) => q}
        itemToString={(q) => q}
      />
    </div>
  );
}

For a complete reference on the properties available to the AutoComplete component, see the AutoCompleteProps API Reference.