如何让SUID中带下拉的TextField不按输入文本过滤选项？

直接替换成以下代码，就能满足你的需求（可直接复制到suid playground运行）：

import { TextField } from '@suid/material';
import { Autocomplete } from '@suid/material';

export default function App() {
  const remotes: string[] = ['First', 'Second'];
  
  return (
    <div>
      <Autocomplete
        id="ipaddr-autocomplete"
        options={remotes}
        // 禁用过滤，始终返回所有选项
        filterOptions={(options) => options}
        // 允许输入自定义文本
        freeSolo
        clearOnEscape
        renderInput={(params) => (
          <TextField
            {...params}
            label="IP address"
            variant="filled"
            type="text"
          />
        )}
      />
    </div>
  );
}

问题解决说明： #

• 始终显示所有选项：通过filterOptions={(options) => options}完全覆盖默认过滤逻辑，不管输入什么内容，下拉列表都会完整展示所有选项，不会出现匹配选项被移除的情况。
• 修复选中后无法切换选项：Autocomplete组件原生支持重复打开下拉选择不同选项，配合freeSolo属性，既允许输入任意自定义文本，又能正常选择预设选项，解决了选过First后不能再选Second的问题。
• 启用clearOnEscape：直接给Autocomplete设置clearOnEscape属性即可生效，按下ESC键就能清空输入框，替代原TextField中无效的配置。

为什么不用datalist？ #

原生datalist的过滤逻辑是浏览器内置的，无法禁用，而且交互逻辑受限（比如选中后下拉行为不符合预期），而Autocomplete是SUID提供的可控组件，能完全自定义下拉行为，更适合你的需求。

内容的提问来源于stack exchange，提问作者vjalle