Navigate back to the homepage

How to provide custom input value in autocomplete textfield in react material UI?

Infinitbility
React
December 29th, 2021 · 1 min read
How to provide custom input value in autocomplete textfield in react material UI?

Hello Friends 👋,

Welcome to Infinitbility.

MUI Autocomplete Provide option to show suggestion list in below Textfield and it works like a charm but problems comes when we want to show multiple options in suggestion like Name, and email.

When user select suggestion it should show only email in Textfield but it’s my expectation, it’s will show whole text available in option text.

So let’s comes to solution Material UI ( MUI ) Autocomplete provide onChange event and inputValue props to handle this types of situwation.

On onChange event we will only store email on our state and help of inputValue props we will show that on textfield value, let’s do with example.

1import React, { useState } from "react";
2import TextField from "@material-ui/core/TextField";
3import Autocomplete from "@material-ui/lab/Autocomplete";
4
5export default function ComboBox() {
6 const [selectedValue, SetSelectedValue] = useState("");
7
8 return (
9 <Autocomplete
10 id="combo-box-demo"
11 options={top100Films}
12 getOptionLabel={(option) => `${option.name} -${option.email}`}
13 onChange={(event, option) => {
14 if (option?.email) {
15 SetSelectedValue(option.email);
16 } else {
17 SetSelectedValue("");
18 }
19 }}
20 inputValue={selectedValue}
21 style={{ width: 300 }}
22 renderInput={(params) => (
23 <TextField {...params} label="Combo box" variant="outlined" />
24 )}
25 />
26 );
27}
28
29// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
30const top100Films = [
31 { id: 1, name: "Infinit", email: "[email protected]" },
32 { id: 2, name: "Bility", email: "[email protected]" }
33];

In above example i’ve create a array of name, email option and both so on suggestion and when user will click on suggestion it only show email on textfield value.

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to find the index of an object in an array in javascript?

How to find the index of an object in an array in javascript?

Javascript, find index of object in array example.

December 22nd, 2021 · 1 min read
How to get all keys of object in javascript?

How to get all keys of object in javascript?

Javascript, Get array of object keys using javascrit `Object.keys()` method.

December 21st, 2021 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]