材质UI -自动完成，将显示选项只有当我输入@就像skype的方式或任何其他聊天编辑器

Question

我们知道有什么方法可以处理Material UI自动完成，仅在键入特定键(如@)时显示自动完成列表吗?

Answer 1

这绝对是可能的。但是，在Material-UI的自动完成API中没有内置的道具来做这个。您可以创建一个功能组件，它将接受组件的隐藏/显示状态。

你可以看看这个答案，它使用第一个字符来检查是否建议。你也可以对它应用特定的高亮。

onChange = (event) => {
if(event.target.value[0]==="@"){
// some component with data to              
// be shown
}
}

也看看这个相互依赖的例子。

Answer 2

我正面临着完全相同的问题，与自动完成域名。试试这个。

const filterOptions = createFilterOptions({
stringify: (option: any) => {
let emailBeforeAtSign: string = "";
if(clientDataFormState.email.includes("@")){
emailBeforeAtSign = clientDataFormState.email.split('@')[0];
return emailBeforeAtSign + "@" + option;
}else return ""
} 

});

然后，在<AutoComplete>组件上使用filterOptions。

像这样

<Autocomplete
freeSolo
filterOptions={filterOptions}
disableClearable
{... other options} 
/>

让我知道是否有效!