ant-design
  1. ant-design-autocomplete
PreviousNext

Ant Design AutoComplete

AutoComplete is a feature in Ant Design that provides a searchable dropdown list of options to select from as you type. It's a useful component for any form where you need to provide suggestions based on a user's input, such as an address or phone number.

Syntax

The syntax for the AutoComplete component is as follows:

import { AutoComplete } from 'antd';

<AutoComplete
  options={options}
  placeholder="Enter your search term"
  filterOption={true or false}
  onSelect={onSelect}
  onSearch={onSearch}
/>

  • options: An array of objects that defines the options in the dropdown list.

  • placeholder: The text to display in the input field before the user begins typing.

  • filterOption: Determines whether options in the dropdown list should be filtered based on the user's input.

  • onSelect: An event that is triggered when an option is selected from the dropdown list.

  • onSearch: An event that is triggered when the user begins typing in the input field.

Use and Importance

AutoComplete is a valuable component because it simplifies the process of selecting an option from a large list. Rather than scrolling through a long list of options, the user can quickly narrow down their choices by typing a few letters.

AutoComplete is especially useful in scenarios where the user may not know the exact option they are searching for or when the list of options is constantly changing.

Example

Here is an example of a simple AutoComplete component:

import { AutoComplete } from 'antd';

const options = [
  { value: 'apple' },
  { value: 'banana' },
  { value: 'pear' },
  { value: 'orange' }
];

const onSelect = (value) => {
  console.log('Selected:', value);
};

const onSearch = (value) => {
  console.log('Search:', value);
};

const AutoCompleteComponent = () => {
  return (
    <AutoComplete
      options={options}
      placeholder="Enter a fruit"
      filterOption={true}
      onSelect={onSelect}
      onSearch={onSearch}
    />
  );
};

export default AutoCompleteComponent;

In this example, we define an array of options, set some basic callbacks for onSelect and onSearch, and render the AutoComplete component with those options.

Summary

AutoComplete is a powerful component in Ant Design that simplifies the process of selecting an option from a dropdown list. It helps to reduce the amount of time users spend navigating large lists and provides a better user experience overall. With its simple syntax and flexibility, AutoComplete is an excellent tool for any developer looking to create efficient and intuitive web forms.

StepsCascader
Published on: