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.

Saeed Shamloo · Accepted Answer · 2022-01-16 17:45:22Z

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.

answered Jan 16, 2022 at 17:45

Saeed Shamloo

6,6021 gold badge11 silver badges22 bronze badges

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

2 Comments

Hello World Over a year ago

Thanks for your help. This is the expected behavior.

Saeed Shamloo Over a year ago

You're welcome.

TheWhiteFang · Accepted Answer · 2022-03-05 17:22:17Z

Well AutoComplete is an input component. What you need is select with search. 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,
);

Collectives™ on Stack Overflow

Autocomplete using Antd in Reactjs

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related