React Suite Autocomplete Autocomplete suffix

React Suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React Suite Autocomplete suffix. The AutoComplete component auto-completes the free text value with the given option value. A suffix is added as a custom text input that follows the user input.

Syntax:

<AutoComplete data={data} onChange={handleChange} />

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: The below example demonstrates the basic suffix usage in an autocomplete component.

Javascript

import { useState } from "react";
import { AutoComplete } from "rsuite";
import "rsuite/dist/rsuite.min.css";

const suffixes = [
    '@hotmail.com',
    '@gmail.com',
    '@outlook.com',
    '@geeksforgeeks.org',
]

export default function App() {

    const [data, setData] = useState([]);

    const handleChange = value => {
        const at = value.match(/@[\S]*/);
        const nextData = at
            ? suffixes
                .filter(item => item.indexOf(at[0]) >= 0)
                .map(item => {
                    return `${value}${item.replace(at[0], '')}`;
                })
            : suffixes.map(item => `${value}${item}`);

        setData(nextData);
    };

    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite AutoComplete Suffix
                </h4>
            </div>
            <div style={{ padding: 20, textAlign: 'center' }}>
                <div style={{ width: 300 }}>
                    <AutoComplete
                        data={data}
                        onChange={handleChange}
                    />
                </div>
            </div>
        </div>
    );
}

Output:

Example 2: The below example demonstrates the suffix usage in an autocomplete component with a placeholder.

Javascript

import { useState } from "react";
import { AutoComplete } from "rsuite";
import "rsuite/dist/rsuite.min.css";

const suffixes = [
    '@hotmail.com',
    '@gmail.com',
    '@outlook.com',
    '@geeksforgeeks.org',
]

export default function App() {

    const [data, setData] = useState([]);

    const handleChange = value => {
        const at = value.match(/@[\S]*/);
        const nextData = at
            ? suffixes
                .filter(item => item.indexOf(at[0]) >= 0)
                .map(item => {
                    return `${value}${item.replace(at[0], '')}`;
                })
            : suffixes.map(item => `${value}${item}`);

        setData(nextData);
    };

    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite AutoComplete Suffix
                </h4>
            </div>
            <div style={{ padding: 20, textAlign: 'center' }}>
                <div style={{ width: 300 }}>
                    <AutoComplete
                        data={data}
                        onChange={handleChange}
                        placeholder="Enter your Email"
                    />
                </div>
            </div>
        </div>
    );
}

Output:

Reference: https://rsuitejs.com/components/auto-complete/#autocomplete-suffix