Material UI AutoComplete组件即时搜索：表单提交需两次回车问题

要实现选择下拉选项后直接跳转页面，核心是监听AutoComplete的选项选中事件，跳过表单提交的回车触发逻辑，具体调整方案如下：

关键调整步骤 #

• 移除依赖表单回车提交的逻辑，改用AutoComplete的onChange事件处理跳转
• 强制仅允许选择下拉选项（避免手动输入干扰）

代码示例 #

import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

// 你的选项列表，包含跳转地址
const pageOptions = [
  { label: '产品页', url: '/products' },
  { label: '用户中心', url: '/user' },
  { label: '帮助文档', url: '/docs' },
];

export default function PageJumpAutocomplete() {
  // 选项选中时触发跳转
  const handleSelectOption = (event, selectedOption) => {
    if (selectedOption) {
      // 原生跳转方式
      window.location.href = selectedOption.url;
      // 若使用React Router，替换为：
      // navigate(selectedOption.url);
    }
  };

  return (
    <Autocomplete
      options={pageOptions}
      getOptionLabel={(option) => option.label}
      onChange={handleSelectOption}
      freeSolo={false} // 禁止手动输入，只能选下拉选项
      renderInput={(params) => (
        <TextField {...params} label="选择跳转页面" variant="outlined" />
      )}
    />
  );
}

问题原因说明 #

之前需要两次回车的本质是：

1. 选中选项后输入框仍处于聚焦状态，第一次回车仅让输入框失焦
2. 第二次回车才触发表单的提交事件

通过onChange直接监听选项选中动作，选完立即执行跳转，完全绕开表单提交的回车触发逻辑，解决两次回车的问题。

内容的提问来源于stack exchange，提问作者Control