SQL城市名自动补全：忽略特殊字符查询及MUI组件适配问题

我是SQL新手，正在开发美国城市名自动补全功能，一开始用的SQL语句能正常运行：

SELECT city FROM cities WHERE city ILIKE $1 || '%' LIMIT 4

但需要适配带句点（比如St. Louis）、连字符（比如Wilkes-Barre）的城市名，希望用户输入“st l”或“st. l”都能检索到对应结果。

最初尝试修改SQL，去掉城市名里的句点来匹配：

SELECT city FROM cities WHERE REPLACE(city, '.', '') ILIKE $1 || '%' LIMIT 4

但一开始没得到预期结果，后来排查发现问题根本不在SQL——这条SQL实际运行是正常的，真正的问题出在对MUI Autocomplete组件的理解上：该组件会在后端返回结果后，自动对比用户输入和选项内容，做二次过滤，导致符合SQL条件的结果被组件拦截了。

解决步骤 #

1. 完善SQL匹配逻辑（可选）
   如果要同时适配连字符，可以扩展REPLACE函数，统一处理城市名里的特殊符号：

SELECT city FROM cities 
WHERE REPLACE(REPLACE(city, '.', ''), '-', '') ILIKE $1 || '%' 
LIMIT 4

这样不管用户输入带不带句点、连字符，都能匹配到处理后的城市名。

2. 配置MUI Autocomplete的filterOptions
   必须自定义filterOptions来跳过组件的默认过滤，或者让过滤逻辑和SQL保持一致，确保后端返回的结果能正常展示。最简单的方式是直接返回所有后端返回的选项（因为已经在SQL层完成了过滤）：

const filterOptions = (options, { inputValue }) => {
  return options;
};

// 在Autocomplete组件中引入该配置
<Autocomplete
  filterOptions={filterOptions}
  // 其他必要配置（比如fetchOptions获取后端数据等）
/>

这样就能实现用户输入“st l”“st. l”时，正确检索到St. Louis这类带特殊字符的城市名了。

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