反应自动完成组件,每次输入字母时调用端点
React autocomplete component, call endpoint every time a letter is typed
我正在使用 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}));
非常感谢您的帮助。
顺便反应一下
在 material-ui
库中 Autocomplete
组件有一个道具 onChange
可以像这样使用。
onChange={(event, newValue) => {
setValue(newValue);
}}
你应该对第二个参数感兴趣newValue
。因此,每次键入一个字母时,您都会收到一个新的输入值。
因此,只需将获取列表的逻辑移至此回调即可。
您可以在 material-ui
文档
中阅读有关 controllable state 的更多信息
实现 onChange 函数并赋予它您已经创建的函数应该会给您想要的解决方案。
我正在使用 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}));
非常感谢您的帮助。 顺便反应一下
在 material-ui
库中 Autocomplete
组件有一个道具 onChange
可以像这样使用。
onChange={(event, newValue) => {
setValue(newValue);
}}
你应该对第二个参数感兴趣newValue
。因此,每次键入一个字母时,您都会收到一个新的输入值。
因此,只需将获取列表的逻辑移至此回调即可。
您可以在 material-ui
文档
实现 onChange 函数并赋予它您已经创建的函数应该会给您想要的解决方案。