MUI Core-使用自动完成组件作为搜索框
我正在尝试使用Material-UI（MUI）自动完成组件，但更像是搜索栏。因此，当您单击搜索区域/文本字段时，我正在尝试禁用值的弹出窗口。我尝试使用onkeydown事件，但这只是键盘，我尝试了免费的solo，但是它一直打开下拉列表。有什么想法吗？
示例代码IVE在下面尝试过。
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" />}
/>
I'm trying to use Material-UI (MUI) Autocomplete component but more like a search bar. So i am trying to disable the popup of values when you click in the search area/text field. I have tried using the onkeyDown event but this is just keyboard, and i've tried free-solo but it keeps opening the dropdown list. Any ideas chaps?
Sample code ive tried below.
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" />}
/>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
为了实现所需的行为，您可以使用
openprop并设置条件，例如：where
searchInputValue将是负责搜索输入的国家的价值。To achieve the desired behavior you can use the
openprop and set condition to it like:where
searchInputValuewill be the value of the state responsible for the search input.