Question

我试图在我的项目中实现“自动完成”组件，但过一段时间后从浏览器获取自动填充/自动完成功能。您知道我如何将其设置为关闭吗？

                        <Autocomplete

                            id="combo-box-demo"
                            options={battleRepos}
                            getOptionLabel={option => option.full_name}
                            style={{ width: 500 }}
                            renderInput={params => (
                                <TextField {...params} 
                                    label="Combo box"  
                                    variant="outlined"
                                    onBlur={event => console.log(event.target.value)}

                                    fullWidth  />
                            )}
                        />

Answer 1

更新

随着@ material-ui / core 4.7.0和@ material-ui / lab 4.0.0-alpha.33的发布，此问题现已修复，不再需要下面显示的解决方法。

此问题已在最近的pull request中修复，但尚未发布（将在下一版本中发布）。

如果您要在发布此版本之前解决此问题（可能需要几天的时间），可以像以下所示设置inputProps.autoComplete = "off"：

<Autocomplete
    id="combo-box-demo"
    options={battleRepos}
    getOptionLabel={option => option.full_name}
    style={{ width: 500 }}
    renderInput={params => {
        const inputProps = params.inputProps;
        inputProps.autoComplete = "off";
        return (
          <TextField
            {...params}
            inputProps={inputProps}
            label="Combo box"  
            variant="outlined"
            onBlur={event => console.log(event.target.value)}
            fullWidth
          />
        );
      }
    }
/>

Answer 2

即使是最新版本：

 "@material-ui/core" 
 "@material-ui/lab"

其中包含设置为'off'的autoComplete属性，我无法使自动填充框消失。

还尝试在表单标签<form autoComplete="off">...</form>上设置属性

无济于事。

解决问题的方法是将autoComplete字段设置为“ new-password”

<Autocomplete
    id='id'
    options={data}
    onChange={(e, val) => input.onChange(val)}
    renderInput={(params) => {
        params.inputProps.autoComplete = 'new-password';
        return <TextField {...params}
            label={label} placeholder="Type to Search" />
    }} 
/>

Material-UI自动完成和TextField触发Google自动完成

2 个答案: