用户输入后加载 Material UI 自动完成建议答案

【问题标题】：Load Material UI AutoComplete suggestions after user input用户输入后加载 Material UI 自动完成建议
【发布时间】：2021-05-20 19:19:02
【问题描述】：

我有一个自动完成组件，它需要加载大量数据列表（最多 6000 个元素）并根据用户的输入显示相应的建议。

由于数据选项有很多元素，每当用户开始在速度较慢的计算机上输入时，它就会变慢并且需要一些时间来加载所有内容。我必须阻止它，所以我想出了一个想法，在用户输入第三个字符后显示他们的建议。每当用户单击输入框时，它甚至都会给我这个错误：

警告：React 检测遇到错误：RangeError：最大调用堆栈大小超出控制台。

我需要在第三个字符输入后显示建议。我曾尝试使用getOptionDisabled suggestion 和limitTags，但它们不起作用。

代码如下：

const NameSelect = (props) => {
  return (
    <Dialog>
        <React.Fragment>
          <DialogTitle id="search-name-dialog-title">
            Search name
          </DialogTitle>
          <DialogContent>
                <Autocomplete
                  id="combo-box-client-select"
                  options={props.NameList}
                  value={props.preSelectedName}
                  
                  getOptionLabel={(option) =>
                    option.Name_name +
                    ", " +
                    option.country +
                    ", " +
                    option.city
                  }
                  onChange={(object, value) => {
                    props.preSelectedNameSet(value);
                  }}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      label="Search name"
                      variant="outlined"
                      fullWidth
                    />
                  )}
                />
              .
              .
              .
    </Dialog>
  );
};

有人可以帮助我采用这种方法，还是建议一种更好的方法？谢谢！

【问题讨论】：

也许在这个question解决？
@JosepJoestar 最近的 Material UI 版本中不存在 popoverProps。如果我使用 prop ''Open''，它会在我打开自动完成组件时工作，但它不会在用户输入时更新。

标签： javascript reactjs input autocomplete material-ui

【解决方案1】：

试试这样的：

<Autocomplete
    inputValue={inputValue}
    onInputChange={(e) => setinputValue(event.target.value)}
    id="combo-box-demo"
    options={values}
    getOptionLabel={(option) => option}
    style={{ width: 300 }}
    renderInput={(params) => (
      <TextField {...params} label="Combo box" variant="outlined" />
    )}
    open={inputValue.length > 2}
  />

使用InputValue 属性触发自动完成下拉菜单。示例：auto complete dropdown

【讨论】：

我已经使用了您的解决方案并更改了一些内容，以使自动完成功能在没有焦点的情况下不会出现。谢谢！
在失去焦点时关闭下拉菜单，使用状态打开并在自动完成中使用 onBlur 方法将状态设置为 false

【解决方案2】：

我的想法是为自动完成当前值添加一个状态以监视其autoComplete 属性。该状态将如下所示：

  const [currentValue, useCurrentValue] = useState(props.preSelectedName);

让你的组件看起来像这样：

<Autocomplete
autoComplete={currentValue.length >= 3 ? true : false}
onChange={useCurrentValue}
   ...your other properties     
                />

另一个想法：您可能想在您的 onChange 方法中使用 setTimeout 来减慢重新渲染的速度。但不要忘记在设置它们之前clearTimeout。

【讨论】：

【解决方案3】：

您需要的功能称为“去抖动”，当耗时任务频繁发生时使用它。在您的情况下，每次您键入密钥时，都会计算建议，这肯定会导致滞后。

Lodash 的 debounce 函数将为您实现这一点。

据我所知，我不确定您是否可以使用 MUI 自动完成来实现此功能，但您可以使用自定义解决方案执行以下操作：-

import React, { useState, useCallback } from "react"; 
import { _ } from "lodash";


function AutoComplete() {  
 const [input, setInput] = useState("");   
 const [suggestions, setSuggestions] = useState([]);

  const updateInput = (input) => {
    setInput(input);
    /*_.debounce will fire the setSuggestions
     and fetchSuggestions only after a gap of 3000ms */
    _.debounce((input) => setSuggestions(fetchSuggestions(input), 3000));   
  };

  return (
    <div>
      <input
        value={input}
        class="input"
        onChange={(event) => updateInput(event.target.value)}
      />
      <div class="suggestions">
        <ul>
          {suggestions?.length > 0 &&
            suggestions?.map((val, idx) => (
              <li class="suggestion" key={idx}>
                {val}
              </li>
            ))}
        </ul>
      </div>
    </div>   
  ); 
}
  


export default AutoComplete;

您可以使用适当的样式和 materialize.css 设置组件的样式，以便获得 MUI 的自动完成组件的功能副本。

【讨论】：