Autocomplete using Antd in Reactjs-CodePudding

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.

CodePudding user response：

Well AutoComplete is an inputcomponent. What you need isselectwithsearch`. The example you provided can be implemented a bit to make it work as you want. You might need to make some modifications. The below code is just to demonstrate how you can change it, not sure if it will run without errors or not.

import { Select } from 'antd';

const { Option } = Select;

function onChange(value) {
  console.log(`selected ${value}`);
}

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" }
];

function onSearch(val) {
  console.log('search:', val);
}

ReactDOM.render(
  <Select
    showSearch
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={onChange}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
    { options.map((option => <Option value={option.value}>{option.hellop}</Option>)) }
  </Select>,
  mountNode,
);

CodePudding user response：

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.