Material UI Autocomplete implementation with options containing array of objects (ID and label)

Question

I am using Material UI Autocomplete for my project. As shown in official documentation, my options are,

let options = [
   { id: "507f191e810c19729de860ea", label: "London" },
   { id: "u07f1u1e810c19729de560ty", label: "Singapore" },
   { id: "lo7f19re510c19729de8r090", label: "Dhaka" },
]

Then, I am using Autocomplete as,

import React, { Component, Fragment, useState } from "react"
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import options from "/options"

function SelectLocation(props){
    const [ input, setInput ] = useState("");

    const getInput = (event,val) => {
        setInput(val);
    }

    return (
        <Autocomplete
            value={input}
            options={options}
            renderOption={option => <Fragment>{option.label}</Fragment>}}
            getOptionLabel={option => option.label}
            renderInput={params => {
                return (
                    <TextField 
                        {...params} 
                        label={props.label} 
                        variant="outlined" 
                        fullWidth
                    />
                )
            }}
            onInputChange={getInput}
        />
    )
}

Now my UI (options list) is showing what I expected. The problem is, I am getting London or Singapore as a value of my input, but I want to get the selected object or ID from this input.

I've followed their documentation thoroughly, but couldn't find a way!

xsh.7 · Accepted Answer · 2019-12-15 14:06:23Z

6

onInputChange get's fired with the actual content of the input.

You might want to use the onChange event exposed by the input props, which will return the selected element. The id should then be available as val.id in your getInput callback.

answered Dec 15, 2019 at 14:06

xsh.7

6,2701 gold badge25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikola Mitic · Accepted Answer · 2023-08-21 15:02:32Z

-1

For others that might have the same issues as I. In case your option are array of objects (or any other data structure), use the following:

getOptionLabel new api of autoComplete will allow for you to select any option value from your data source.

Example

<SearchInput
  getOptionLabel={(option) => option["whateverKeyYouNeed"]}
  .
  .
  .
  .
/>

More here >>> https://mui.com/material-ui/react-autocomplete/

answered Aug 21, 2023 at 15:02

Nikola Mitic

1,5123 gold badges13 silver badges28 bronze badges

Collectives™ on Stack Overflow

Material UI Autocomplete implementation with options containing array of objects (ID and label)

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related