Friday, September 5, 2025
HomeLanguagesReact Suite Autocomplete Basic

React Suite Autocomplete Basic

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 Basic. The AutoComplete component auto-completes the free text value with the given option value.

AutoComplete Props:

  • classPrefix: It is used to denote the prefix of the component CSS class.
  • data: It is used to denote the data of the component.
  • defaultValue: It is used to denote the default value.
  • disabled: It is used to indicate whether the disabled select or not.
  • filterBy: It is used for the custom filter rules.
  • menuClassName: It is used to denote a CSS class to apply to the Menu DOM.
  • onChange: It is a callback function triggered when selecting an option or the input value change or the value of the input is changed.
  • onClose: It is a callback function that is triggered when hidden.
  • onEnter: It is a callback function that is triggered before the overlay transitions in.
  • onEntered: It is a callback function that is triggered after the overlay finishes transitioning in.
  • onEntering: It is a callback function that is triggered as the overlay begins to transition in.
  • onExit: It is a callback function that is triggered right before the overlay transitions out.
  • onExited: It is a callback function that is triggered after the overlay finishes transitioning out.
  • onExiting: It is a callback function that is triggered as the overlay begins to transition out.
  • onSelect: It is a callback function triggered when an option is selected.
  • placeholder: It is used to denote the placeholder of input.
  • renderItem: It is used for the custom selected option.
  • selectOnEnter: The Enter key selection function is invalid when this is set to false.
  • value: It is used to denote the value (Controlled).

Syntax:

<AutoComplete data={data} placeholder="..." />

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 autocomplete component.

Javascript




import { AutoComplete } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
const data = [
    'Developer',
    'Engineer',
    'Data Scientist',
    'Data Engineer',
    'Mobile App Developer'
]
  
export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>neveropen</h2>
                <h4 style={{ color: "green" }}>
                    React Suite AutoComplete Basic
                </h4>
            </div>
            <div style={{ padding: 20, textAlign: 'center' }}>
                <div style={{ width: 300 }}>
                    <AutoComplete
                        data={data}
                    />
                </div>
            </div>
        </div>
    );
}


Output:

 

Example 2: The below example demonstrates the autocomplete component with a placeholder prop.

Javascript




import { AutoComplete } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
const data = [
    'Developer',
    'Engineer',
    'Data Scientist',
    'Data Engineer',
    'Mobile App Developer'
]
  
export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>neveropen</h2>
                <h4 style={{ color: "green" }}>
                    React Suite AutoComplete Basic
                </h4>
            </div>
            <div style={{ padding: 20, textAlign: 'center' }}>
                <div style={{ width: 300 }}>
                    <AutoComplete
                        data={data}
                        placeholder="Search Jobs"
                    />
                </div>
            </div>
        </div>
    );
}


Output:

 

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
Dominic
Dominichttp://wardslaus.com
infosec,malicious & dos attacks generator, boot rom exploit philanthropist , wild hacker , game developer,
RELATED ARTICLES

Most Popular

Dominic
32264 POSTS0 COMMENTS
Milvus
81 POSTS0 COMMENTS
Nango Kala
6634 POSTS0 COMMENTS
Nicole Veronica
11801 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11863 POSTS0 COMMENTS
Shaida Kate Naidoo
6750 POSTS0 COMMENTS
Ted Musemwa
7025 POSTS0 COMMENTS
Thapelo Manthata
6701 POSTS0 COMMENTS
Umr Jansen
6718 POSTS0 COMMENTS