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

Question

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

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

Warning: React instrumentation encountered an error: RangeError: Maximum call stack size exceeded console.

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

有人可以帮我解决这个问题，或者推荐一个更好的方法吗？谢谢！

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 道具触发自动完成下拉。示例：auto complete dropdown

Answer 2

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

  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 函数将为您实现。

据我所知，我不确定您是否可以使用 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 自动完成组件的功能副本。

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

Load Material UI AutoComplete suggestions after user input

javascript

reactjs

input

autocomplete

material-ui