Autocomplete with custom input in material ui not working

Asked
Active3 hr before
Viewed126 times

7 Answers

autocompleteworkingmaterialcustominput
90%

In order to add new items with the Autocomplete you should use the freeSolo property of the Autocomplete. This feature gives you an option to automatically use the value from the input and add it into the value of the Autocomplete.,The onChange prop of the Autocomplete gets a function that you can use for this.,If user types in something and clicks outside the textbox it should convert freetext into a tag. Also, allow user to continue adding more tags from the predefined list/free text.

Option #1 - If the complex objects are only the pre-existing values, you can use this in order to display the correct values:

<Autocomplete
  freeSolo
  getOptionLabel={option => option.title || option}
  ...
/>
88%

The autocomplete is a normal text input enhanced by a panel of suggested options.,The widget is useful for setting the value of a single-line textbox in one of two types of scenarios:,The component exposes a factory to create a filter method that can provided to the filterOptions prop. You can use it to change the default option filter behavior.

<Autocomplete
  id="combo-box-demo"
  options={top100Films}
  getOptionLabel={(option) => option.title}
  style={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
load more v
72%

Search Answer Titles

Pretag
 Pretag team - issue, fix, solve, resolve
65%

Pretag
 Pretag team - issue, fix, solve, resolve
75%

Spectrum will become read-only on August 24, 2021. Learn more about the decision in our official announcement.,📋 Custom React hooks for form validation without the hassle

Pretag
 Pretag team - issue, fix, solve, resolve
40%

I’m glad the autocomplete component example helped!,How to Set Multiple Values Programmatically in Material-UI’s Autocomplete Component,Below is my code for my customized Autocomplete component. I will explain the three most important (and cryptic) props:

Fetching the data required two hooks: useEffect and useState.

const [data, setData] = useState([]);
useEffect(() => {
   fetch("https://swapi-deno.azurewebsites.net/api/starships")
      .then((response) => response.json())
      .then((data) => setData(data));
});
load more v
22%

AutoComplete is an Input component that supports auto complete tips. As such, it should not support props like labelInValue that affect value display. In v3, the AutoComplete implementation can not handle the case where the value and label are identical. v4 not longer support label as the value input.,Autocomplete function of input field.,AutoComplete is an input box with text hints, and users can type freely. The keyword is aiding input.

import React, { useState } from 'react';
import { AutoComplete } from 'antd';

const mockVal = (str: string, repeat: number = 1) => ({
  value: str.repeat(repeat),
});
const Complete: React.FC = () => {
  const [value, setValue] = useState('');
  const [options, setOptions] = useState<{ value: string }[]>([]);
  const onSearch = (searchText: string) => {
    setOptions(
      !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
    );
  };
  const onSelect = (data: string) => {
    console.log('onSelect', data);
  };
  const onChange = (data: string) => {
    setValue(data);
  };
  return (
    <>
      <AutoComplete
        options={options}
        style={{ width: 200 }}
        onSelect={onSelect}
        onSearch={onSearch}
        placeholder="input here"
      />
      <br />
      <br />
      <AutoComplete
        value={value}
        options={options}
        style={{ width: 200 }}
        onSelect={onSelect}
        onSearch={onSearch}
        onChange={onChange}
        placeholder="control mode"
      />
    </>
  );
};

ReactDOM.render(<Complete />, mountNode);
load more v

Other "autocomplete-working" queries related to "Autocomplete with custom input in material ui not working"