In this tutorial, we are going to learn how to build React Autocomplete. We will learn step by step to look at every aspect through which we can create an autosuggest component in React to make the experience of the user amazing.
Hopefully, all of us are very well aware of the concept of Autocomplete. Every day, we search about many topics in Google and there are also many other search engines and apps with a large number of required results.
Autocomplete is a wonderful feature. It helps in predicting the rest of the word after the user types. We see that Google shows a list of keywords as well as sentences as soon as the user starts typing something in the search bar. It saves a lot of time and offers several choices to the user without making much effort.
So, implementing Autocomplete in React is quite manageable and it can be done in a number of different ways. We will be doing react-autocomplete npm module to achieve the auto-suggest functionality.
How To Implement Autocomplete Functionality In React 17
Let’s learn the step by step implementation of autocomplete function in React.
Step 1- Set Up React App
Follow the first step in which we have to install the React app:
npx create-react-app react-autocomplete-tutorial
Then, we enter into the project folder:
cd react-autocomplete-tutorial
Step 2- Install React Autocomplete Library
Here, we will install React autocomplete library in React App:
npm i react-autocomplete --saveStep 3- Set Up Movies Static Data In JSON Format
We need some static data for building autocomplete in React. So, we will create a new file and custom function inside the src directory and name it movies-data.js. Insert the following movies list data and custom function in movies-dat.js file.
export function MoviesData() {
return [
{ "title": "The Shawshank Redemption", "rank": "1", "id": "tt0111161" },
{ "title": "The Godfather", "rank": "2", "id": "tt0068646" },
{ "title": "The Godfather: Part II", "rank": "3", "id": "tt0071562" },
{ "title": "Pulp Fiction", "rank": "4", "id": "tt0110912" },
{ "title": "The Good, the Bad and the Ugly", "rank": "5", "id": "tt0060196" },
{ "title": "The Dark Knight", "rank": "6", "id": "tt0468569" },
{ "title": "12 Angry Men", "rank": "7", "id": "tt0050083" },
{ "title": "Schindler's List", "rank": "8", "id": "tt0108052" },
{ "title": "The Lord of the Rings: The Return of the King", "rank": "9", "id": "tt0167260" },
{ "title": "Fight Club", "rank": "10", "id": "tt0137523" },
{ "title": "Star Wars: Episode V - The Empire Strikes Back", "rank": "11", "id": "tt0080684" },
{ "title": "The Lord of the Rings: The Fellowship of the Ring", "rank": "12", "id": "tt0120737" },
{ "title": "One Flew Over the Cuckoo's Nest", "rank": "13", "id": "tt0073486" },
{ "title": "Inception", "rank": "14", "id": "tt1375666" },
{ "title": "Goodfellas", "rank": "15", "id": "tt0099685" },
{ "title": "Star Wars", "rank": "16", "id": "tt0076759" },
{ "title": "Seven Samurai", "rank": "17", "id": "tt0047478" },
{ "title": "Forrest Gump", "rank": "18", "id": "tt0109830" },
{ "title": "The Matrix", "rank": "19", "id": "tt0133093" },
{ "title": "The Lord of the Rings: The Two Towers", "rank": "20", "id": "tt0167261" },
{ "title": "City of God", "rank": "21", "id": "tt0317248" },
{ "title": "Se7en", "rank": "22", "id": "tt0114369" },
{ "title": "The Silence of the Lambs", "rank": "23", "id": "tt0102926" },
{ "title": "Once Upon a Time in the West", "rank": "24", "id": "tt0064116" },
{ "title": "Casablanca", "rank": "25", "id": "tt0034583" },
{ "title": "The Usual Suspects", "rank": "26", "id": "tt0114814" },
{ "title": "Raiders of the Lost Ark", "rank": "27", "id": "tt0082971" },
{ "title": "Rear Window", "rank": "28", "id": "tt0047396" },
{ "title": "It's a Wonderful Life", "rank": "29", "id": "tt0038650" },
{ "title": "Psycho", "rank": "30", "id": "tt0054215" },
{ "title": "Léon: The Professional", "rank": "31", "id": "tt0110413" },
{ "title": "Sunset Blvd.", "rank": "32", "id": "tt0043014" },
{ "title": "American History X", "rank": "33", "id": "tt0120586" },
{ "title": "Apocalypse Now", "rank": "34", "id": "tt0078788" },
{ "title": "Terminator 2: Judgment Day", "rank": "35", "id": "tt0103064" },
{ "title": "Saving Private Ryan", "rank": "36", "id": "tt0120815" },
{ "title": "Memento", "rank": "37", "id": "tt0209144" },
{ "title": "City Lights", "rank": "38", "id": "tt0021749" },
{ "title": "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb", "rank": "39", "id": "tt0057012" },
{ "title": "Alien", "rank": "40", "id": "tt0078748" },
{ "title": "Modern Times", "rank": "41", "id": "tt0027977" },
{ "title": "Spirited Away", "rank": "42", "id": "tt0245429" },
{ "title": "North by Northwest", "rank": "43", "id": "tt0053125" },
{ "title": "Back to the Future", "rank": "44", "id": "tt0088763" },
{ "title": "Life Is Beautiful", "rank": "45", "id": "tt0118799" },
{ "title": "The Shining", "rank": "46", "id": "tt0081505" },
{ "title": "The Pianist", "rank": "47", "id": "tt0253474" },
{ "title": "Citizen Kane", "rank": "48", "id": "tt0033467" },
{ "title": "The Departed", "rank": "49", "id": "tt0407887" },
{ "title": "M", "rank": "50", "id": "tt0022100" },
{ "title": "Paths of Glory", "rank": "51", "id": "tt0050825" },
{ "title": "Vertigo", "rank": "52", "id": "tt0052357" },
{ "title": "Django Unchained", "rank": "53", "id": "tt1853728" },
{ "title": "Double Indemnity", "rank": "54", "id": "tt0036775" },
{ "title": "The Dark Knight Rises", "rank": "55", "id": "tt1345836" },
{ "title": "Aliens", "rank": "56", "id": "tt0090605" },
{ "title": "Taxi Driver", "rank": "57", "id": "tt0075314" },
{ "title": "American Beauty", "rank": "58", "id": "tt0169547" },
{ "title": "The Green Mile", "rank": "59", "id": "tt0120689" },
{ "title": "Gladiator", "rank": "60", "id": "tt0172495" },
{ "title": "The Intouchables", "rank": "61", "id": "tt1675434" },
{ "title": "WALL·E", "rank": "62", "id": "tt0910970" },
{ "title": "The Lives of Others", "rank": "63", "id": "tt0405094" },
{ "title": "Toy Story 3", "rank": "64", "id": "tt0435761" },
{ "title": "The Great Dictator", "rank": "65", "id": "tt0032553" },
{ "title": "The Prestige", "rank": "66", "id": "tt0482571" },
{ "title": "A Clockwork Orange", "rank": "67", "id": "tt0066921" },
{ "title": "Lawrence of Arabia", "rank": "68", "id": "tt0056172" },
{ "title": "Amélie", "rank": "69", "id": "tt0211915" },
{ "title": "To Kill a Mockingbird", "rank": "70", "id": "tt0056592" },
{ "title": "Reservoir Dogs", "rank": "71", "id": "tt0105236" },
{ "title": "Das Boot", "rank": "72", "id": "tt0082096" },
{ "title": "The Lion King", "rank": "73", "id": "tt0110357" }
]
}
export function renderMovieTitle(state, val) {
return (
state.title.toLowerCase().indexOf(val.toLowerCase()) !== -1
);
}
We declared renderMovieTitle () custom function which filters out the movie title typed by the user inside the search field. When the user starts typing in the search field, this function will look for the movie name in the MoviesData() and return the movie’s title as a suggested result.
Step 4- Insert Autocomplete Module In App.js
We will get to know here how to build autocomplete in React by inserting the following code in src/App.js file:
import React, { Component } from 'react';
import { MoviesData, renderMovieTitle } from './movies-data';
import Autocomplete from 'react-autocomplete';
import './App.css';
class App extends Component {
state = { val: '' };
render() {
return (
<div className="autocomplete-wrapper">
<h3>React Autocomplete Demo</h3>
<Autocomplete
value={this.state.val}
items={MoviesData()}
getItemValue={item => item.title}
shouldItemRender={renderMovieTitle}
renderMenu={item => (
<div className="dropdown">
{item}
</div>
)}
renderItem={(item, isHighlighted) =>
<div className={`item ${isHighlighted ? 'selected-item' : ''}`}>
{item.title}
</div>
}
onChange={(event, val) => this.setState({ val })}
onSelect={val => this.setState({ val })}
/>
</div>
);
}
}
export default App;
Now, let’s understand the API or methods that we have used above:
value: It is an initial value, we set an empty value.
items: It is a list of an array or data, we are rendering the data from the Moviesdata() array.
getItemValue: Used to read the display value from each entry in items.
shouldItemRender: This is an optional function, it is invoked for each entry in items and its return value is used to determine whether or not it should be displayed in the dropdown menu. By default, all items are always rendered.
renderMenu: This is an optional function, invoked to generate the render tree for dropdown menu. Ensure the returned tree includes every entry in items or else the highlight order and keyboard navigation logic will break. Styles will contain {top, left, minWidth} which are the coordinates of the top-left corner and the width of the dropdown menu.
renderItem: This method is invoked for each entry in items that also passes shouldItemRender to generate the render tree for each item in the dropdown menu. Styles is an optional set of styles that can be applied to improve the look/feel of the items in the dropdown menu.
onChange: This method is called when a user changes the value in the input field.
onSelect: This method is called when a user chooses an item from the suggested dropdown list.
Step 5- Style Autocomplete Module
Here, style the autocomplete module by adding the given below CSS code in src/index.css file:
* {
box-sizing: border-box;
}
body {
margin: 50px 0 0;
text-align: center;
font-family: sans-serif;
background-color: #f6f8fa;
}
.autocomplete-wrapper {
width: 350px;
position: relative;
display: inline-block;
}
.autocomplete-wrapper > div {
width: 100%;
}
.autocomplete-wrapper input {
border: 1px solid #cecece;
padding: 12px 15px;
font-size: 14px;
width: 100%;
}
.autocomplete-wrapper input:focus {
border-color: #0F67FF;
box-shadow: none;
outline: none;
}
.autocomplete-wrapper .dropdown {
width: 100%;
padding: 0;
text-align: left;
max-height: 280px;
overflow: hidden;
overflow-y: auto;
background-color: #ffffff;
border: 1px solid #0F67FF;
border-top: none;
}
.autocomplete-wrapper .item {
display: block;
cursor: pointer;
font-size: 14px;
padding: 15px;
}
.autocomplete-wrapper .item.selected-item {
background-color: #0069ff;
color: #FAFBFC;
}
.autocomplete-wrapper .item:hover {
background-color: #0069ff;
color: #FAFBFC;
}
Step 7- Start The React App
npm start
Conclusion
Finally, we reach the end of this tutorial. Hopefully, you have completely understood Autocomplete in React with a practical example.
Thanks