Material UI 5 Autocomplete回车触发搜索功能异常问题问询

问题核心 #

Autocomplete 组件本身不自带回车触发搜索的默认逻辑，需要手动监听键盘事件来实现输入回车跳转搜索的功能。你当前的代码里虽然写了onEnterButton处理回车，但没有把这个事件绑定到实际接收键盘输入的 TextField 上，所以回车时没有触发搜索逻辑。

解决方案 #

1. 绑定键盘事件到输入框 #

在 renderInput 返回的 TextField 上添加 onKeyDown 属性，把你写的onEnterButton函数绑定上去，这样输入框就能监听到回车事件。

2. 确保状态同步正确 #

你的onInputChange已经在实时同步输入框的内容到状态q，所以回车时直接用q作为搜索值即可，不管是选中下拉项还是手动输入的文本都能正确获取。

修改后的完整代码 #

import React, { useState, useEffect } from 'react';
import { TextField, Autocomplete, Button, Box } from '@mui/material';
import axios from '../../axios.js';

export default function SearchBar2({ postSearchHandler, query }) {
  const [q, setQ] = useState(() => query || '');
  const [suggestions, setSuggestions] = useState([]);

  const search = (value) => {
    console.log(`search: ${value}`);
    postSearchHandler(value);
  };

  useEffect(() => {
    console.log(`useEffect getSuggestions: ${q}`);
    if (q) {
      axios.post('/api/suggest', { q, top: 5, suggester: 'sg' })
        .then(response => {
          setSuggestions(response.data.suggestions.map(s => s.text));
        }).catch(error => {
          console.log(error);
          setSuggestions([]);
        });
    }
  }, [q]);


  const onInputChangeHandler = (event, value) => {
    console.log(`onInputChangeHandler: ${value}`);
    setQ(value);
  };


  const onChangeHandler = (event, value) => {
    console.log(`onChangeHandler: ${value}`);
    setQ(value);
    search(value);
  };

  const onEnterButton = (event) => {
    console.log(`onEnterButton: ${q}`);
    if (event.key === 'Enter') {
      // 阻止默认行为，避免页面刷新或其他冲突
      event.preventDefault();
      search(q);
    }
  };

  return (
    <div
      className="input-group"
      style={{ width: '95%', display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '0 auto' }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center', width: '75%', minWidth: '390px' }}>
        <Autocomplete
          freeSolo
          value={q}
          options={suggestions}
          onInputChange={onInputChangeHandler}
          onChange={onChangeHandler}
          disableClearable
          sx={{
            width: '75%',
            '& .MuiAutocomplete-endAdornment': {
              display: 'none'
            }
          }}
          renderInput={(params) => (
            <TextField
              {...params}
              id="search-box"
              className="form-control rounded-0"
              placeholder="What are you looking for?"
              onBlur={() => setSuggestions([])}
              onClick={() => setSuggestions([])}
              // 绑定回车事件到输入框
              onKeyDown={onEnterButton}
            />
          )}
        />
        <div className="input-group-btn" style={{ marginLeft: '10px' }}>
          <Button variant="contained" color="primary" onClick={() => {
            console.log(`search button: ${q}`);
            search(q)
          }}>
            Search
          </Button>
        </div>
      </Box>
    </div>
  );
}

关于freeSolo的说明 #

开启freeSolo是正确的选择，它允许用户输入下拉列表之外的自定义文本，配合onInputChange实时同步输入内容到状态q，这样回车时就能正确获取到用户手动输入的文本。之前没生效只是因为没绑定键盘事件，和freeSolo本身无关。

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