@react-md/autocomplete

@react-md/autocomplete

Create an accessible autocomplete component that allows a user to get real-time suggestions as they type within an input. This component can also be hooked up to a backend API that handles additional filtering or sorting.

Installation

npm install --save @react-md/autocomplete

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

The AutoComplete component just requires:

• an id to identify the field (required for a11y)
• a list of data that can be a list of string, number, or object

However, it is recommended to also provide a label and placeholder text to help the user understand this component.

import React from "react";
import { AutoComplete } from "@react-md/autocomplete";

const fruits = [
  "Apple",
  "Apricot",
  "Banana",
  "Blueberry",
  "Cranberry",
  "Kiwi",
  "Peach",
  "Plum",
  "Strawberry",
];

function Example() {
  return (
    <AutoComplete
      id="search-fruits"
      name="fruits"
      label="Fruits"
      placeholder="Kiwi..."
      data={fruits}
    />
  );
}

Changelog

2.8.4 (2021-06-10)

Bug Fixes

• @react-md/form: Pass checked prop to component (bffae6f)
• @react-md/form: Fixed controlled behavior for Switch components (8c65df6), closes #1175
• @react-md/utils: omit uses readonly prefix for key list (d3e1ee8)
• @react-md/utils: Slightly better tooltip behavior after clicking somewhere on the page (4d3fc16)

Documentation

• react-md.dev: Updated general documentation (9bc8a0d)
• react-md.dev: Update next and build deps to fix font loading issues (e528617)

Other Internal Changes

• updated doc tsconfig for better autocompletion (7fb8b94)
• Renamed contrast check function (97c1ad7)
• add website alias to changelog config (d98bf51)
• ran prettier after upgrading to v2.3.0 (3ce236a)