MUI核心-使用自动完成组件作为搜索框

Question

我试图使用Material-UI (MUI)自动完成组件，但更像一个搜索栏。所以我试图禁用值的弹出，当你点击在搜索区/文本字段。我试过使用onkeyDown事件，但这只是键盘，我试过自由独奏，但它一直打开下拉列表。伙计们，有什么想法吗?

示例代码如下。

return ( 
<Autocomplete
openOnFocus={false}
disablePortal={true}
id="combo-box-demo"
freeSolo
options={labels}
sx={{ width: 300 }}
onMouseClick={(event) => {
console.log(event.key);
if (event.key === 'Click') {
// Prevent's default 'Enter' behavior.
event.defaultMuiPrevented = true;

}
}}
renderInput={(params) => <TextField {...params} label="SKU" />}
/>

Answer 1

要实现所需的行为，您可以使用openprop并设置条件，如:

<Autocomplete
open={true && searchInputValue.length>0}
...
/>

其中searchInputValue为负责搜索输入的状态值。