React Suite Autocomplete Autocomplete suffix
Last Updated :
30 Aug, 2022
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...