当HTML力有不逮：
内容提要
作者尝试用HTML5的<datalist>实现自动补全，但发现各浏览器在过滤方式、显示格式和移动端支持上行为不一致：Android 8以上WebView和Firefox均不支持该标签。作者用表情符号技巧实现多字段填充，但Chrome移动端存在输入重复等bug。最终作者用TypeScript自建自动补全组件，仅198行代码，效果更好。结论是HTML5新表单元素的浏览器支持仍不可靠，有时自建UI更稳妥。
延伸解读
浏览器行为差异：不只是外观问题
文章指出，<datalist>在不同浏览器中的过滤逻辑和显示格式并不统一。例如，Chrome、Firefox和Safari支持子串匹配，而旧版Edge只匹配开头；对于<option value="C#">C Sharp</option>，Chrome显示两行，Safari只显示值，Firefox和Edge显示标签。这些差异意味着开发者无法依赖一致的用户体验，尤其当选项文本和值不同时，用户看到的提示可能不符合预期。
移动端支持：WebView与Firefox的缺失
作者在Android 8及以上版本的WebView中发现<datalist>无法工作，且Firefox（包括Firefox Focus）也不支持该标签。这导致依赖WebView的混合应用或默认使用Firefox的用户无法使用自动补全。作者通过Custom Tabs强制使用Chrome绕过限制，但Chrome移动端仍存在输入重复的bug，说明移动端支持不仅缺失，即使可用也不稳定。
表情符号技巧：多字段填充的临时方案
由于<datalist>只能填充单个输入框，作者利用输入事件和表情符号分隔符，将多个字段的值编码在一个字符串中，再通过正则解析填充其他字段。这种方法虽然可行，但属于hack，依赖字符串解析，且可能受浏览器显示差异影响。作者最终自建组件后，改用对象引用替代正则，减少了脆弱性，说明临时方案虽能解决问题，但长期维护成本较高。
自建组件的权衡：198行TypeScript的启示
作者最终用198行TypeScript自建自动补全组件，基于Bootstrap 4样式和Popper.js定位，支持键盘操作，并修复了原方案的多个问题。文章认为，尽管HTML5标准已多年，但新表单元素的浏览器支持仍不可靠，自建UI虽然增加工作量，但能提供更一致、更可控的体验。这一结论也适用于<input type="date">等元素，它们在桌面Safari不支持或显示不佳，跨平台一致性差。
Q&A
HTML5的<datalist>元素在浏览器中有哪些兼容性问题？
各浏览器在过滤方式、显示格式和移动端支持上行为不一致：Chrome、Firefox和Safari支持子串任意位置匹配，而旧Edge只匹配开头；显示上Chrome显示“C# C Sharp”两行，Safari只显示“C#”，Firefox和Edge显示“C Sharp”；移动端Safari默认不展开列表，Chrome on Android与桌面类似；Android 8以上WebView和Firefox均不支持该标签。
作者如何用<datalist>实现一次填充多个输入字段？
作者利用表情符号作为分隔符：在每个选项前加✨，并将其他字段的值用不同表情符号分隔后嵌入同一个字符串。当用户选择选项触发input事件时，检测字段是否以✨开头，然后用正则表达式拆分出三个值，分别填入三个输入框，并移除第一个字段中的✨。
为什么作者最终放弃<datalist>而选择自建自动补全组件？
因为遇到太多浏览器bug和支持问题：Android 8+ WebView不支持datalist，Firefox不支持，Chrome移动端存在输入重复的bug，且各浏览器显示和过滤行为不一致。自建组件用TypeScript仅198行代码，基于Bootstrap 4 CSS和Popper.js定位，支持键盘操作，效果更好且更少hack。
在移动端使用<datalist>时遇到了哪些具体问题？
Android 8及以上WebView中datalist完全不工作；Firefox for Android不支持该标签；Chrome on Android存在输入字符有时重复出现的bug（如输入A变成AA，提示消失）。此外，移动Safari默认不展开列表，只显示部分选项作为预测。
作者自建的自动补全组件有哪些优点？
该组件用198行TypeScript代码实现，采用Bootstrap 4样式和Popper.js定位，支持键盘操作，比许多现有组件更稳定（避免鼠标长按导致的问题），能根据空间自动调整位置（如向上展开），并且去除了正则解析的hack，直接使用原始对象数据。
文章对HTML5新表单元素的总体结论是什么？
尽管HTML5标准已制定多年，但浏览器对新标签的支持仍不可靠，存在诸多兼容性和行为不一致问题。有时投入额外工作自建UI组件反而更稳定、一致且易用。类似问题也存在于其他新表单元素，如<input type="date">在桌面Safari不支持，datetime-local仅Chrome支持等。
