使用输入的文本而不是下拉列表中的项目获取 Material UI 自动完成输入

Question

我正在使用 Material UI (5) 自动完成功能为以下用户场景提供搜索功能：

• 用户输入文本，然后按 Enter -> 转到包含该文本的搜索页面
• 用户输入文本并从下拉列表中选择 -> 转到包含所选项目的搜索页面

第一个场景不起作用。第二个是。自动完成功能是否有自己的能力来处理 Enter 键按下，或者我是否需要包装它以获取该按键事件并将文本输入发送到搜索？

因为要解决第一个场景，所以我添加了一个提交按钮。如果我将自动完成功能包装在 div 中并对其执行操作，则状态没有正确的查询值。

我希望自动完成功能在按下输入按钮时发送正确的文本（输入或从建议中选择）。

我尝试过自由独奏，但没有尝试过自由独奏，它似乎并没有改变结果。它只能与其他配置结合使用吗？

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 enter key is pressed
    if (event.key === 'Enter') {
      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([])}
          />
        )}
      />
      <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>
  );
}

Answer 1

所以你想处理这种情况：

用户输入文本并按 Enter 键，而不从下拉列表中选择选项

为此，您需要实现

onKeyDown

事件。

onKeyDown={(event) => {
  if (event.key === 'Enter') {
    console.log(`onEnterButton: ${q}`);
  }
}}

完整代码：

<Autocomplete
  freeSolo
  value={q}
  options={suggestions}
  onInputChange={onInputChangeHandler}
  onChange={onChangeHandler}
  disableClearable
  sx={{
    width: '75%',
    '& .MuiAutocomplete-endAdornment': {
      display: 'none',
    },
  }}
  onKeyDown={(event) => {
    if (event.key === 'Enter') {
      console.log(`onEnterButton: ${q}`);
    }
  }}
  renderInput={(params) => (
    <TextField
      {...params}
      id="search-box"
      className="form-control rounded-0"
      placeholder="What are you looking for?"
      onBlur={() => setSuggestions([])}
      onClick={() => setSuggestions([])}
    />
  )}
/>

文档参考。