AutoComplete

The AutoComplete component is an input field with predictive text functionality that suggests possible matches from a predefined list as the user types. This component significantly improves data entry efficiency by reducing the amount of typing required and minimizing errors. It's commonly used in search bars, address forms, or any scenario where users need to input known items quickly. For instance, in an e-commerce site, AutoComplete can be used in search boxes to suggest popular products or categories.

Code 

import AutoComplete from "@lumina-design/core/AutoComplete";

<AutoComplete
  dataSet={[
    { id: 1, name: "apple" },
    { id: 2, name: "orange" },
    { id: 3, name: "banana" },
    { id: 4, name: "pine apple" },
    { id: 5, name: "custard apple" },
    { id: 6, name: "watermelon" }
  ]}
  onChange={(value) => setFruit(value?.name || "NULL VALUE")}
  value={fruit}
  placeholder="Start typing here..."
  label="Enter fruit name"
  id="AutoComplete"
  className="AutoComplete"
  renderItem={(_item) => (
    <div className="autocomplete-row">
      {_item.name})
    </div>
  )}
  dataSetType="nested" // flat / nested
  dataTargetKey="name"
/>