iOS Safari中datalist输入选择无响应问题排查

先修正原代码中的语法错误（部分<option>标签末尾多了多余的斜杠），修正后的完整代码如下：

<!DOCTYPE html>
<html>
 
<body>
    <form action="">
        <label>Favorite fruit: </label>
        <input list="fruits" id="fruitsInput" autocomplete='off' autocorrect='off' spellcheck='off'/>
        <datalist id="fruits">
            <option value="Apple">Apple</option>
            <option value="Peaches">Peaches</option>
            <option value="Pear">Pear</option>
            <option value="Apricot">Apricot</option>
            <option value="Banana">Banana</option>
        </datalist>
        
        <button onclick="datalistcall()" type="button">
            Click Here
        </button>
    </form>

<p id="output"></p>
    <script type="text/javascript">
        function datalistcall() {
            var o1 = document.getElementById("fruitsInput").value;
            document.getElementById("output").innerHTML =
                "You select " + o1 + " option";
        }
    </script>
</body>
 
</html>

这段代码在桌面浏览器中可正常运行：输入框通过datalist获取下拉选项，点击按钮能展示所选内容。但在iOS Safari中会出现以下异常：

• 点击输入框右侧箭头，可正常展开选项菜单
• 输入内容筛选时，匹配的选项会显示在键盘上方，而非输入框下方的datalist菜单
• 选中键盘上方的选项后，列表消失，但输入框内容无变化，也不会触发任何输入事件

问题根源 #

这是iOS Safari对HTML5 datalist组件的兼容性缺陷，并非配置遗漏：

• iOS Safari会将datalist选项识别为系统级输入建议，而非原生组件菜单
• 选中这类系统建议时，存在事件触发丢失的问题，导致输入框无法同步选中值

可行的替代方案 #

要在iOS Safari中实现稳定的「输入+下拉筛选」功能，推荐以下两种方式：

• 使用成熟的第三方UI组件（如Select2、Choices.js），这类组件封装了多端兼容的下拉筛选逻辑
• 自定义下拉菜单：监听输入框的input事件，手动筛选选项并渲染自定义列表，绑定选择事件同步输入框内容

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