antd 选择关闭自动完成

Question

我正在尝试关闭 ant design Select 上的自动完成功能，但我尝试的任何方法都不起作用。这显然是有问题的，因为 chromes（此时仅测试了一个）自动完成功能完全覆盖了选择选项（下图）。

我在 React 中使用 antd，并且在 Select 标签和 Form 标签上都尝试了以下操作：

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

他们似乎都没有关闭它。

这是一个代码沙盒的链接，代码几乎相同，但问题是它没有重现相同的问题。出于某种原因，沙盒上完全相同的代码没有显示自动完成功能。我添加了一个电子邮件输入来显示以测试自动完成功能是否有效，并且确实有效。我不知道为什么这在沙盒中的工作方式与在我的服务器中的工作方式不同。

https://codesandbox.io/s/wovnzpl9xw

这是用户输入搜索选项时的样子

它应该是这样的（它只是在焦点上看起来像这样，但一旦用户键入 chrome 就会显示自动完成）

Answer 1

我已申请将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>;

Answer 2

您也可以使用AutoComplete 而不是Select，因为这样可以更改底层Input

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

AutoComplete 是“新的”，旨在用于为输入获取数据而不是静态数据时使用，但本质上它只是 Select 的副本，并且可以以相同的方式使用。

Answer 3

为我的问题找到了解决方案，感谢@trkaplan 为我指明了正确的方向。我猜这不是最优雅的解决方案，所以如果其他人有更好的方法来实现这一点，我会全力以赴。我基本上必须为Select 创建一个onFocus 方法，该方法抓取所有具有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 4

您必须将filterOption 设置为false

见this code sandbox