Autocomplete using Antd in Reactjs

Question

I am making an autocomplete options in react app and generated the autocomplete field with list of options.

Working Example:

List of options:

const options = [
  { label: "hello", value: "1" },
  { label: "codesandbox", value: "2" },
  { label: "react", value: "3" },
  { label: "nodejs", value: "4" },
  { label: "java", value: "5" },
  { label: "antd", value: "6" },
  { label: "dependency", value: "7" },
  { label: "less", value: "8" }
];

Here if user select the data react, then the input has the value as 3 .

Expectation:

Expectation is that the input field needs to have the text as react but the selected value needs to be 3.

So for user display, it needs to be in text and the background value will be number.

Referred this post React Antd v4 autocomplete shows selected value instead of label upon selecting an option but it doesn't help in any way.

Answer 1

As @TheWhiteFang answered, one solution to solve your problem is using Select component with showSearch prop, but if you want to use AutoComplete one another solution could be defining two seprate states, one state for input value and another state for selectedOption from AutoComplete. Then you could manage your states by onChange and onSelect props. like this:

const Complete = () => {
  const [selectedOption, setSelectedOption] = React.useState('');
  const [inputValue, setInputValue] = React.useState('');

  const onSelect = (data, option) => {
    setSelectedOption(option);
    setInputValue(option.label);
  };

  const onChange = (data, option) => {
    setInputValue(data);
    setSelectedOption(option); // to remove selected option when user types  something wich doesn't match with any option
  };

  return (
   <AutoComplete
        value={inputValue}
        options={options}
        autoFocus={true}
        style={{width: 200}}
        filterOption={(inputValue, option) =>
          option.label.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
        }
        onSelect={onSelect}
        onChange={onChange}
      />
  );
};

Maybe you need to make some changes in above example by your requirement, anyway you can find above example Here on stackblitz.