用户输入后加载材质 UI 自动完成建议

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}
  />

使用InputValueprop 触发自动完成下拉菜单。示例：自动完成下拉菜单