Product Autocomplete

About this piece

Ecommerce suggestions dropdown with a product thumbnail, name, and trailing price column.

Usage

The import and the props worth knowing about, in one place.

import { Search18 } from "@/components/beste/piece/search18";

<Search18
  query="linen"
  products={[
    {
      "name": "Washed linen pillow",
      "image": "https://images.unsplash.com/photo-1584100936595-c0654b55a2e2?w=120&h=120&fit=crop&auto=format&q=70",
      "price": "$48"
    },
    {
      "name": "Linen throw blanket",
      "image": "https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?w=120&h=120&fit=crop&auto=format&q=70",
      "price": "$112"
    },
    {
      "name": "Striped linen cushion",
      "image": "https://images.unsplash.com/photo-1616627561950-9f746e330187?w=120&h=120&fit=crop&auto=format&q=70",
      "price": "$34"
    }
  ]}
  bordered={false}
/>