求助：输入过滤脚本在IE11失效、Chrome正常，求排查原因及解决办法

嗨，我来帮你搞定这个IE11的兼容性问题！首先得说，你的当前代码其实并没有实现输入文本筛选datalist选项的功能——它只是在点击输入框时快速显示又隐藏datalist，这本身逻辑就不对，而且IE11对<datalist>的原生行为和Chrome差异很大，这才是问题根源。

问题核心 #

Chrome等现代浏览器会自动根据输入值过滤datalist的选项，但IE11完全不支持这个原生过滤功能。另外，IE11里无法通过show()/hide()直接控制datalist的显示状态，因为它的下拉行为是浏览器原生控制的。

兼容IE11的解决方案 #

我们需要手动实现输入过滤逻辑，监听输入框的输入事件，手动筛选并控制option的显示/隐藏。以下是修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // 监听输入事件，实现过滤
    $("input").on('input click', function(){
        var inputVal = $(this).val().toLowerCase();
        var datalist = $("#brow");
        
        // 遍历所有option，匹配的显示，不匹配的隐藏
        datalist.find('option').each(function(){
            var optionVal = $(this).val().toLowerCase();
            if(optionVal.indexOf(inputVal) !== -1){
                $(this).css('display', 'block');
            } else {
                $(this).css('display', 'none');
            }
        });
    });
});
</script>
</head>
<body>
<input list="brow" placeholder="输入浏览器名称">
<datalist id="brow">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</body>
</html>

关键修改点说明 #

• 把事件从click改成同时监听input和click：input事件处理输入时的过滤，click事件处理点击输入框时显示所有选项（如果输入框为空）。
• 手动遍历datalist的option，通过indexOf匹配输入值，用css('display', ...)控制显示/隐藏——IE11不支持用hide()/show()直接控制option的可见性，必须直接设置display属性。
• 统一转成小写字母做匹配，实现不区分大小写的过滤效果。

这样修改后，代码在Chrome和IE11中都能正常实现输入过滤datalist选项的功能啦！

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