antd选择自动完成的时间

Question

我正在尝试关闭蚂蚁设计的自动填充功能选择，但是我尝试的任何方法都无效。显然，这是有问题的，因为铬（目前仅测试一种）自动完成功能完全覆盖了“选择选项”（下图）。

我在React中使用antd，并且已经在Select标签和Form标签上尝试了以下方法：

autoComplete="off" autoComplete="nope" autoComplete="business-state"

他们似乎都没有将其关闭。

这里是具有几乎相同代码的代码沙箱的链接，但问题是它不会重现相同的问题。由于某种原因，沙盒上完全相同的代码不会显示自动完成功能。我添加了一封电子邮件输入以显示以测试自动完成功能是否可以正常运行，并确定它可以正常运行。我很茫然，为什么它在沙箱中的工作方式不同于服务器上的工作方式。

https://codesandbox.io/s/wovnzpl9xw

这是用户键入搜索选项时的外观

这是它的外观（它只是像这样聚焦，但是只要用户键入chrome就会显示自动完成）

Answer 1

您必须将filterOption设置为false

请参见this code sandbox

Answer 2

感谢@trkaplan为我指出了正确的方向，从而找到了解决我问题的方法。我猜这不是最优雅的解决方案，所以如果有人有更好的方法来实现这一点，我将不胜感激。实际上，我必须为onFocus创建一个Select方法，该方法将捕获所有带有类ant-select-search__field的元素，并通过setAttribute来更改autocomplete属性设置为任意值即可将其禁用。

onFocus={() => {
  if (!this.state.autocompleteDisabled) {
    let i;
    const el = document.getElementsByClassName(
      "ant-select-search__field"
    );
    for (i = 0; i < el.length; i++) {
      el[i].setAttribute(
        "autocomplete",
        "registration-select"
      );
    }
    this.setState({ autocompleteDisabled: true });
  }
}}

Answer 3

您还可以使用AutoComplete代替Select，因为这样可以更改基础的Input

<AutoComplete ... >
  <Input autoComplete='off' id='myId' />
</AutoComplete>

AutoComplete是“新的”，打算在获取输入数据而不是静态数据时使用，但实际上它只是Select的副本，可以按相同的方式使用。

>

Answer 4

我已申请将 autocomplete="none" 添加到 Select 中，看起来不错。

<Select
    showSearch
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearchZipCode}
    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
    placeholder="Choose a City"
    autoComplete="none"
    // disabled={true}
>
    {cities.map((city) => (
        <Select.Option key={city.id} value={city.id}>
            {city.name}
        </Select.Option>
    ))}
</Select>;