用户输入后加载 Material UI AutoComplete 建议

Question

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

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

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

我需要在第三个字符输入后显示建议。 我曾尝试使用getOptionDisabled 建议和 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>
  );
};

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

Answer 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触发自动完成下拉菜单。 示例：自动完成下拉菜单

Answer 2

我的想法是为自动完成当前值添加一个autoComplete以观察其自动完成属性。 state 看起来像这样：

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

这样您的组件将如下所示：

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

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

Answer 3

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

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

据我所知，我不确定您是否可以使用 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;

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