How to add autocomplete in antd editable Cell table

Question

When a user click edit, the edittable cell becomes active, now when I start typing I want autosuggest to appear.

I have a set of options, while the user type I want that to be suggested. My current input cell is antd editable cell.

I want to add autosuggest functionality in my editable cell.

Reference:

Editable cell:

https://ant.design/components/table

Autocomplete:

https://ant.design/components/auto-complete

Answer 1

Just needed to modify antd table edittable cell code, for having autosuggest in antd cells:

From:

<Form.Item>
    <Input
          ref={inputRef}
          value={inputValue}
          onChange={handleChange}
          onPressEnter={save}
          onBlur={save}
          style={{ width: '100%', borderRadius: 0}}
          variant="borderless"
        /> 
</Form.Item>

---

To:

<Form.Item>
    <AutoComplete
        style={{ width: '190%', borderRadius: 0 }}
        options={options}
        placeholder=""
        variant="borderless"
        filterOption={(inputValue, option) =>
            option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
        }
    />
</Form.Item>