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

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