CODEWITHSUNDEEP
reactjsmaterial-ui
rjc30
rjc30

Reputation: 247

How to get the input box value not the selected li tag on autocomplete by material ui?

How to get the value of inputbox on the autocomplete? Because if I used the e.target or e.currentTarget using onchange it will display the li tag not the inputbox.

Inputbox

enter image description here

Console output

enter image description here

Code
const handleChangeAutoComplete = (e, val) => {
    console.log(e.target);
  };


<Autocomplete
                  className={taskClasses.SelectAssignee}
                  options={users}
                  value={users.fullname}
                  onChange={handleChangeAutoComplete}
                  getOptionLabel={(user) => user.fullname}
                  renderInput={(params) => (
                    <TextField
                      placeholder='Assignee'
                      value={params.fullname}
                      {...params}
                      variant='outlined'
                    />
                  )}
                />

Upvotes: 0

Views: 72

Answers (2)

Goutham J.M
Goutham J.M

Reputation: 2194

You will get user input in userInput state,You should get val second argument that you have passed to get object of selected value and instead of using onChange which listens for user select change , you need to use onInputChange , it will send what user types


const handleChangeAutoComplete = (e, val) => {
    console.log(val,"your value will be stored here inside second argument");
  };

Complete Code on how to handle autocomplete


/* eslint-disable no-use-before-define */
/* eslint-disable no-use-before-define */
import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function ComboBox() {
  const [userInput, setUserInput] = useState("");
  const [option, setOption] = useState("");
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top10Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      value={option}
      onChange={(e, v) => {
        setOption(v);
      }}
      onInputChange={(e, v) => {
        setUserInput(v);
      }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top10Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 },
  { title: "The Dark Knight", year: 2008 },
  { title: "12 Angry Men", year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: "Pulp Fiction", year: 1994 },
  { title: "The Lord of the Rings: The Return of the King", year: 2003 },
  { title: "The Good, the Bad and the Ugly", year: 1966 },
  { title: "Fight Club", year: 1999 }
];

You can refer to this sandbox

Edit Material demo (forked)

Upvotes: 1

Medi
Medi

Reputation: 1036

onInputChange= {(event, value)=>{
  console.log(event)
  console.log(value)
}}

Upvotes: 1

Related Questions