Autocomplete In Material UI React

In this tutorial, we are going to discuss a very interesting topic that is autocomplete in material UI react but first Let’s see a quick introduction to autocomplete below.

Introduction

Autocomplete is a module in react js that contains all the methods, properties, and events that can be used for triggering the ajax request mean to say when the user starts typing in the search field so it fetches all the data related to that particular word which the user is trying search Like any search engine, you can take the example of google.

What is Material UI in React?

If we talk about material UI, it is a library in reactjs that is very useful for creating advanced user interfaces by importing the different react components into the react application.

I hope you got the concept of autocomplete material UI in react now let’s understand its works by using the following example.

For creating a reactjs program follow the following steps first.

  • first of all, install react in your system and then check the version by executing the following command in the command prompt
“npm view react version”

The above command will show the version of reactjs.

  • Now execute the following commands in cmd.
npx create-react-application my-application
cd my-application
npm start

The above commands will create a folder for react program in the c drive.

  • Now go to “c” drive open my react application folder and then go to the src file and create a new file there, we created ui.js see the code below.
export function namelist() {
  return [

    { abbr: 'BOSTONCELTICS', name: 'Boston Celtics' },
    { abbr: 'BROOKLYNNETS', name: 'Brooklyn Nets'   },
    { abbr: 'CHARLOTTEHORNETS', name: 'Charlotte Hornets' },
    { abbr: 'HOUSTONROCKETS', name: 'Houston Rockets'},
    { abbr: 'DALLASMAVERICKS', name: 'Dallas Mavericks' },
    { abbr: 'DENVERNUGGETS', name: 'Denver Nuggets' },
    { abbr: 'DETROITPISTONS', name: 'Detroit Pistons' },
    { abbr: 'GOLDENSTATEWARRIORS', name: 'Golden State Warriors' },
    { abbr: 'INDIANAPACERS', name:  'Indiana Pacers' },
    { abbr: 'LOSANGELESCLIPPERS', name:    'Los Angeles Clippers' },
    { abbr: 'LOSANGELESLAKERS', name: 'Los Angeles Lakers' },
    { abbr: 'MEMPHISGRIZZLIES', name: 'Memphis Grizzlies' },
    { abbr: 'MIAMIHEAT',name:'Miami Heat' },
    { abbr: 'MILWAUKEEBUCKS', name: 'Milwaukee Bucks' },
    { abbr: 'MINNESOTATIMBERWOLVES', name: 'Minnesota Timberwolves' },
    { abbr: 'NEWORLEANSPELICANS', name: 'New Orleans Pelicans' },
    { abbr: 'NEWYORK', name: 'New York Knicks' },
    { abbr: 'OKLAHOMACITYTHUNDER', name: 'Oklahoma City Thunder' },
    { abbr: 'ORLANDOMAGIC', name: 'Orlando Magic' },
    { abbr: 'PHILADEPHIA', name: 'Philadelphia 76ers' },
    { abbr: 'PHOENIX', name: 'Phoenix Suns' },
    { abbr: 'PORTLAND', name: 'Portland Trail Blazers' },
    { abbr: 'SACRAMENTO', name: 'Sacramento Kings' },
    { abbr: 'SANANTONIO', name: 'San Antonio Spurs' },
    { abbr: 'TORONTORAPTORS', name: 'Toronto Raptors' },
    { abbr: 'OTHAJAZZ', name: 'Utah Jazz' },
    { abbr: 'WASHINGTON', name: 'Washington Wizards' },
   
  ];
}

export function matchnames(state, value) {
  return (
   
state.name.toLowerCase().indexOf(value.toLowerCase()) !== -1 ||
   
state.abbr.toLowerCase().indexOf(value.toLowerCase()) !== -1
  );
}

Code Explanation

In the above code, we created a list of names with abbreviations in an export function, and then we created an export function named “matchnames” with (states and values) as parameters.

The function “matchnames” actually matches the list names with the user input and will also show the related names. 

In the src folder you can see there is a file already created “app.js” we removed the already written code and added our code see the example below.

import React, { Component } from 'react';
import Autocomplete from  'react-autocomplete';
import { namelist, matchnames } from './info';
import './App.css';

class App extends Component {

  state = { value: '' };

  render() {
    return (
      <div style = {{ marginTop: 40, marginLeft: 50 }}>
        <Autocomplete
          value={ this.state.value }
          inputProps={{ id: 'states-autocomplete' }}
          wrapperStyle={{ position: 'relative', display: 'inline-block' }}
          items={ namelist() }
          getItemValue={ item => item.name }
          shouldItemRender={ matchnames }
          onChange={(event, value) => this.setState({ value }) }
          onSelect={ value => this.setState({ value }) }
          renderMenu={ children => (
            <div className = "menu">
              { children }
            </div>
          )}
          renderItem={ (item, isHighlighted) => (
            <div
              className={`item ${isHighlighted ? 'item-highlighted' : ''}`}
              key={ item.abbr } >
              { item.name }
            </div>
          )}
        />
      </div>
      );
    }
  }

export default App;

Code Explanation

in the above code we used a few terms that are called props let’s understand them first:

the term value is the default value for empty results and the renderInput or inputProps is an object that is used for rendering the input field that belongs to the component material UI. It is a required prop in reactjs.

The next term is wrapperstyle the wrapperstyle is also an object that has a default value like below:

“{display: ‘inline-block’}” 

Then we used the getitemvalue prop that will read an item value from the user input.

We used the shouldItemRender function which will run for each entry in the list it is a function whose return value decides whether the value should be included in the drop-down list or not.

Then we used the onchange function that will change the list item when the user moves the cursor throughout the list items.

We used the onselect function as well which will run when the select a value from the list.

The rendermenu function will run for generating a render tree, that tree will be generated for the drop down list, make sure that the list includes every entered item list otherwise it will not show the suggestions.

The renderitem function will run for the drop-down list values and it will pass the shouldItemRender function that will generate a render tree for the drop-down menu values.

In short, the above code will help to create a user interface, a search list will display the above functions props will work on the features of the search list like suggestions, selections, clicking, searching, matching, etc.

Output

Conclusion

In this article we discussed the topic of autocomplete material UI react, we saw the introduction and then we understand the whole working part of this library and module of reactjs.

We saw the example and used the autocomplete material UI react and created a search field.

That’s all for all today hope you like the tutorial if you have any queries regarding this article so feel free to contact us below. Thanks for reading.

Suggested Article:

Leave a Comment