How to create autocomplete in react js?
March 31, 2023Hi Friends 👋,
Welcome To aGuideHub!
To create autocomplete in React js, import the react and useState components from the react library and the import autocomplete component from the react-autocomplete library. It will create autocomplete in react js.
Today, I am going to show you, how to create autocomplete in react js.
Table of contents
- Set up the React project.
- Import necessary components.
- Use the autocomplete Component.
Step 1: Set up the React project.
First you have to install the React project. You should use create-react-app command to create a new React project.
npx create-react-app my-app
cd my-app
npm startStep 2: Import necessary components.
You have to import the react component, which you can use in your React component.
import React, { useState } from 'react'
import Autocomplete from 'react-autocomplete'Step 3: Use the autocomplete Component.
In this example, you have to use the autocomplete component is to use the state variable value to set the input field’s value and handle the change to the input field using the onchange prop. The onselect prop returns the selected value by setting the value condition variable.
<Autocomplete
items={[
{ label: 'C++' },
{ label: 'C' },
{ label: 'Python' },
{ label: 'JavaScript' },
{ label: 'Julia' },
{ label: 'Java' },
{ label: 'Objective C' },
{ label: 'C#' },
{ label: 'Dart' },
{ label: 'Perl' }
]}
shouldItemRender={(item, value
) => item.label.toLowerCase()
.indexOf(value.toLowerCase()) > -1}
getItemValue={item => item.label}
renderItem={(item, isHighlighted) =>
<div style={{
background: isHighlighted ?
'#bcf5bc' : 'white'
}}
key={item.id}>
{item.label}
</div>
}
value={value}
onChange={e => setValue(e.target.value)}
onSelect={(val) => setValue(val)}
inputProps={{
style: {
width: '300px', height: '20px',
background: '#e4f3f7',
border: '2px outset lightgray'
},
placeholder: 'Search language'
}}
/>ReactJS create autocomplete example.
The below code is an example of, The component use to div element with two child divs. The first child div contains a header element that displays the title of the component. The second child div contains the autocomplete component.
App.js
import React, { useState } from 'react'
import Autocomplete from 'react-autocomplete'
function App() {
const [value, setValue] = useState('');
return (
<div style={{
display: 'flex', flexDirection: 'column',
alignItems: 'center'
}}>
<div>
{/* Inline css*/}
<h4 style={{
padding: '15px',
border: '13px solid red',
color: 'blue'
}}>
React Autocomplete Component
</h4>
</div>
<div>
<Autocomplete
items={[
{ label: 'C++' },
{ label: 'C' },
{ label: 'Python' },
{ label: 'JavaScript' },
{ label: 'Julia' },
{ label: 'Java' },
{ label: 'Objective C' },
{ label: 'C#' },
{ label: 'Dart' },
{ label: 'Perl' }
]}
shouldItemRender={(item, value
) => item.label.toLowerCase()
.indexOf(value.toLowerCase()) > -1}
getItemValue={item => item.label}
renderItem={(item, isHighlighted) =>
<div style={{
background: isHighlighted ?
'#bcf5bc' : 'white'
}}
key={item.id}>
{item.label}
</div>
}
value={value}
onChange={e => setValue(e.target.value)}
onSelect={(val) => setValue(val)}
inputProps={{
style: {
width: '300px', height: '20px',
background: '#e4f3f7',
border: '2px outset lightgray'
},
placeholder: 'Search language'
}}
/>
</div>
</div>
);
}
export default App;Check the output of the above code example.
Here, we are provided code sandbox links for the above program create autocomplete in React js. Then you can use whenever you went and do the changes as per your requirements.
All the best 👍
