How To Create Autocomplete Using Ant Design UI In ReactJS

Abhishek Saini
1y
6.6k
0
0

Article

Introduction

An enterprise-class UI design language and React UI library with high-quality React components, one of the best React UI libraries for enterprises.

Autocomplete function of the input field. When you need an input box instead of a selector and need input suggestions or helping text.

Preconditions

Javascript
Basic knowledge of React JS
Node.js
V.S. Code,Visual Studio
typescript

We cover the below things in this article,

Create React application
Installation of Ant Design UI
How to create autocomplete of Ant Design UI in React js.

Here we will follow the steps for creating autocomplete.

Step 1. Run the below command to create a React.js project.

npx create-react-app my-app --template typescript

Step 2. Run the below command to install Ant Design UI.

npm i @ant-design/icons
npm i antd

Create the files according to the below image.

Create Autocomplete Using Ant Design UI In ReactJS

Step 3. Add the below code in the App.tsx.

import React, { useState } from 'react';
import './index.css';
import { AutoComplete } from 'antd';


const mockVal = (str: string, repeat = 1) => ({
  value: str.repeat(repeat),
});

const App: React.FC = () => {
  const [value, setValue] = useState('');
  const [options, setOptions] = useState<{ value: string }[]>([]);
  const [anotherOptions, setAnotherOptions] = useState<{ value: string }[]>([]);

  const getPanelValue = (searchText: string) =>
    !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];

  const onSelect = (data: string) => {
    console.log('onSelect', data);
  };

  const onChange = (data: string) => {
    setValue(data);
  };

  return (
    <>
      <AutoComplete
        options={options}
        style={{ width: 200 }}
        onSelect={onSelect}
        onSearch={(text) => setOptions(getPanelValue(text))}
        placeholder="input here"
      />
      <br />
      <br />
      <AutoComplete
        value={value}
        options={anotherOptions}
        style={{ width: 200 }}
        onSelect={onSelect}
        onSearch={(text) => setAnotherOptions(getPanelValue(text))}
        onChange={onChange}
        placeholder="control mode"
      />
    </>
  );
};

export default App;

Step 4. Add the below code in package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.34",
    "@types/react": "^18.2.8",
    "@types/react-dom": "^18.2.4",
    "antd": "^5.6.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Step 5. Run the below command to run the application.