反应自动完成组件，每次输入字母时调用端点

Question

我正在使用 React 和 material-ui 的组件自动完成功能，我需要帮助解决以下问题。

在自动完成的例子中，我看到你需要在前端拥有列表的所有元素才能使用自动完成，在我的例子中，我从网络服务中获取列表，它可能很大，所以我没有搜索对于整个列表，我希望每次在自动完成中键入一个字母时，它都会根据正在写入的输入生成对 Web 服务过滤名称的搜索，最大结果为 10 个元素。 Web 服务的端点已经有一个过滤器属性，你可以在其中传递你想要的结果数量和你想要的字母 name.The 自动完成唯一要做的就是每次你输入一个字母它到达端点（使用正在输入的单词进行过滤）并更新自动完成的元素列表。

现在我有以下代码，问题是当您单击自动完成时它会搜索整个列表，但是当您键入每个字母时它不会执行任何操作。

import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';
import CircularProgress from '@material-ui/core/CircularProgress';

const [open, setOpen] = React.useState(false);
const [organizationList, setOrganizationList] = React.useState([]);
const loading = open && organizationList.length === 0;

React.useEffect(() => {
    let active = true;

    if (!loading) {
      return undefined;
    }

    (async () => {      
    
      if (active) {
        try {
          setOrganizationList(await api.post('/v1/organizations/search', {maxResults:10}));
        } catch (error) {
          snackbar.showMessage(error, "error");
        } 

      }
    })();

    return () => {
      active = false;
    };
  }, [loading]);
    
   React.useEffect(() => {
        if (!open) {
          setOrganizationList([]);
        }
      }, [open]);

自动完成的定义：

         <Autocomplete
                  id="asynchronous-demo"
                  style={{ width: 300 }}
                  open={open}
                  onOpen={() => {
                    setOpen(true);
                  }}
                  onClose={() => {
                    setOpen(false);
                  }}
                  getOptionSelected={(option, value) => option.orgName === value.orgName}
                  getOptionLabel={(option) => option.orgName}
                  options={organizationList}
                  loading={loading}
                  renderInput={(params) => (
                    
                    <TextField
                      {...params}
                      label="Asynchronous"
                      variant="outlined"
                      InputProps={{
                        ...params.InputProps,
                        endAdornment: (
                          <React.Fragment>
                            {loading ? <CircularProgress color="inherit" size={20} /> : null}
                            {params.InputProps.endAdornment}
                          </React.Fragment>
                        ),
                      }}
                    />
                  )}
                />

为了到达终点，我有这个：

setOrganizationList(await api.post('/v1/organizations/search', {maxResults:10}));

每次输入字母时，我都需要传递自动完成的输入，如下所示：

setOrganizationList(await api.post('/v1/organizations/search', {name:inputAutocomplete,maxResults:10}));

非常感谢您的帮助。顺便反应一下

Answer 1

在 material-ui 库中 Autocomplete 组件有一个道具 onChange 可以像这样使用。

 onChange={(event, newValue) => {
  setValue(newValue);
}}

你应该对第二个参数感兴趣newValue。因此，每次键入一个字母时，您都会收到一个新的输入值。

因此，只需将获取列表的逻辑移至此回调即可。

您可以在 material-ui 文档

中阅读有关 controllable state 的更多信息

Answer 2

实现 onChange 函数并赋予它您已经创建的函数应该会给您想要的解决方案。

反应自动完成组件，每次输入字母时调用端点

React autocomplete component, call endpoint every time a letter is typed

javascript

reactjs

autocomplete

material-ui

next.js