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 controlled. The AutoComplete component auto-completes the free text value with the given option value. For using a controlled autocomplete component, we use a value prop that specifies the values of the selected items (Controlled).
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} value={value}
onChange={setValue} />
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 controlled autocomplete component.
Javascript
import { useState } from "react"; 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() { const [value, setValue] = useState(''); return ( <div> <div style={{ textAlign: "center" }}> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite AutoComplete Controlled </h4> </div> <div style={{ padding: 20, textAlign: 'center' }}> <div style={{ width: 300 }}> <AutoComplete data={data} value={value} onChange={setValue} placeholder="Search Jobs" /> </div> </div> </div> ); } |
Output:
Example 2: The below example demonstrates the disabled controlled autocomplete component.
Javascript
import { useState } from "react"; 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() { const [value, setValue] = useState(''); return ( <div> <div style={{ textAlign: "center" }}> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite AutoComplete Controlled </h4> </div> <div style={{ padding: 20, textAlign: 'center' }}> <div style={{ width: 300 }}> <AutoComplete data={data} value={value} disabled onChange={setValue} placeholder="Search Jobs" /> </div> </div> </div> ); } |
Output:
Reference: https://rsuitejs.com/components/auto-complete/#controlled
