Autocomplete in React.js Example And Tutorial

While application development, Making it user-friendly is also a very major task for any kind of application.  So today I will explain to you about autocomplete task in React.js application.

In autocomplete, There will be a list in dropdown and list item will be highlighted on the base of entered value in the input area. It can be implemented in various ways as per the requirement of the application. In this article, I am going to use a static list of very fewer items.

 

Let's Get Started

Step 1: Create React.js app

 

Step 2: Install dependencies

Install the react-autocomplete library using the below command:

 

Step 3: update App.js file

As I said earlier, I am going to explain it with very less code and fewer data. So here in the demo, we need to update only App.js file. And update the App.js file. Update it with below code:

 

 

In the above file, We have imported react-autocomplete library at the top. and the new things which are added is Autocomplete. Let's understand it in detail below:

 

Autocomplete explained

props:

1. getItemValue : It is a function, Used to read the display value from each entry in items.

2. items : It is an array, The items to display in the dropdown menu

3. renderItem : It is a function, 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

4. autoHighlight : A boolean, Whether or not to automatically highlight the top match in the dropdown menu.

5. inputProps : It is an object. Props passed to props.renderInput.; By default, these props will be applied to the <input /> element rendered by Autocomplete unless you have specified a custom value for props.renderInput. 

6. shouldItemRender: It is a function. Invoked for each entry in items and its return value is used to determine whether or not it should be displayed in the drop-down menu. By default all items are always rendered.

7. onChange: It is a function, Invoked every time the user changes the input’s value.

8.onSelect: This function invokes when the user selects an item from the drop-down menu.

9. renderMenu: It is the function, Invoked to generate the render tree for the drop-down menu. 

10. renderItem: It is the function and invoked for each entry in the items that also passes shouldItemRender to generate the render tree for each item in the drop-down menu. 

To get more about this library click here

Step 4: Check the app on browser

If you have started the app with reactjs app. check it over browser on url : http://localhost:3000/

You will page like below:

 

Conclusion

So in this demo, I explained about the react-autocomplete library and how we can use it for autocomplete in reactjs app. You can find other react.js sample projects here.

 

That’s all for now. Thank you for reading and I hope this demo will be very helpful to understand autocomplete in React.js app.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.