如果您想在每次用户在搜索框中键入内容时更新选项,您可以使用onInputChange
Autocomplete 属性并将其挂接到执行 API 调用并更新options
根据结果。
HTML
<Autocomplete
id="combo-box-demo"
options={options}
onInputChange={onInputChange}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
JavaScript
const [options, setOptions] = useState([]);
const previousController = useRef();
const getData = (searchTerm) => {
if (previousController.current) {
previousController.current.abort();
}
const controller = new AbortController();
const signal = controller.signal;
previousController.current = controller;
fetch("https://dummyjson.com/products/search?q=" + searchTerm, {
signal,
headers: {
"Content-Type": "application/json",
Accept: "application/json"
}
})
.then(function (response) {
return response.json();
})
.then(function (myJson) {
console.log(
"search term: " + searchTerm + ", results: ",
myJson.products
);
const updatedOptions = myJson.products.map((p) => {
return { title: p.title };
});
setOptions(updatedOptions);
});
};
const onInputChange = (event, value, reason) => {
if (value) {
getData(value);
} else {
setOptions([]);
}
};
onInputChange
将执行 HTTP 请求(getData(value)
)如果用户输入了某些内容。如果字符串为空(即用户已删除他们输入的文本),它将默认options
到空数组。在这个函数中,value
是用户输入的字符串。
getData
执行 HTTP 请求并调用setOptions
根据返回的结果更新自动完成选项。指某东西的用途中止控制器 https://developer.mozilla.org/en-US/docs/Web/API/AbortController是为了确保当用户键入(或删除)一个字符并发出下一个 HTTP 请求时,之前的 HTTP 请求被取消。这是因为,根据 API 的速度,请求可能不会按照发送的顺序返回。
See 这个代码沙盒 https://codesandbox.io/s/react-mui-forked-2g3jq9?file=/index.js一个工作演示。