如何阻止自动填充功能填充表单的所有输入字段？

嘿，我来帮你解决浏览器自动填充表单的问题！这里有几个实用的方案，还会结合你提供的代码做调整，确保你的搜索输入框不会被自动填充干扰：

1. 直接使用autocomplete属性 #

这是最基础的解决方案，给目标输入框添加autocomplete="off"，部分浏览器对autocomplete="new-password"的识别优先级更高（哪怕不是密码框也能生效），可以试试这个更稳妥的属性值：

<input type="text" id="source" autocomplete="new-password">
<input type="text" id="destination" autocomplete="new-password">

2. 动态切换输入框类型（针对顽固浏览器） #

有些浏览器会忽略autocomplete="off"，我们可以在页面加载时临时把输入框类型切换为password再改回text，让浏览器无法识别为可填充的普通文本框：

$(document).ready(function() {
    // 对两个输入框执行临时类型切换
    $('#source').attr('type', 'password').attr('type', 'text');
    $('#destination').attr('type', 'password').attr('type', 'text');
});

3. 添加隐藏的“诱饵”字段 #

浏览器通常会优先填充第一个匹配规则的字段，我们可以在真实输入框前添加隐藏的同名字段，让浏览器去填充这个诱饵，从而避开真实输入框：

<!-- 隐藏的诱饵字段，浏览器会优先填充它 -->
<input type="text" name="source" style="display: none;">
<input type="text" name="destination" style="display: none;">

<!-- 真实的输入框 -->
<input type="text" id="source" autocomplete="off">
<input type="text" id="destination" autocomplete="off">

结合你的代码调整后的完整示例 #

我把阻止自动填充的逻辑和你原有搜索代码结合，还修复了原代码中点击列表项会互相干扰的小问题：

<!-- 调整后的输入框HTML -->
<input type="text" id="source" autocomplete="new-password">
<div id="sourcelist"></div>

<input type="text" id="destination" autocomplete="new-password">
<div id="destinationlist"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 临时切换输入框类型，阻止自动填充
    $('#source').attr('type', 'password').attr('type', 'text');
    $('#destination').attr('type', 'password').attr('type', 'text');

    // source输入框的搜索逻辑
    $('#source').keyup(function() {
        var query = $(this).val();
        if (query != '') {
            $.ajax({
                url: "search.php",
                method: "POST",
                data: { query: query },
                success: function(data) {
                    $('#sourcelist').fadeIn();
                    $('#sourcelist').html(data);
                }
            });
        } else {
            $('#sourcelist').fadeOut(); // 输入为空时隐藏列表
        }
    });

    // 绑定source列表的点击事件，避免和destination冲突
    $(document).on('click', '#sourcelist li', function() {
        $('#source').val($(this).text());
        $('#sourcelist').fadeOut();
    });

    // destination输入框的搜索逻辑
    $('#destination').keyup(function() {
        var query = $(this).val();
        if (query != '') {
            $.ajax({
                url: "search1.php",
                method: "POST",
                data: { query: query },
                success: function(data) {
                    $('#destinationlist').fadeIn();
                    $('#destinationlist').html(data);
                }
            });
        } else {
            $('#destinationlist').fadeOut(); // 输入为空时隐藏列表
        }
    });

    // 绑定destination列表的点击事件
    $(document).on('click', '#destinationlist li', function() {
        $('#destination').val($(this).text());
        $('#destinationlist').fadeOut();
    });
});
</script>

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