基于jQuery Autocomplete实现上方输入框内容自动补全的问题求助

原代码问题分析 #

• 原代码在keyup事件中每次按键都将当前输入值加入数组，导致数组充斥输入过程中的中间值（比如输入"Jon"时，"J"、"Jo"、"Jon"都会被添加），这是补全效果混乱的核心原因
• Autocomplete初始化时绑定静态数组，后续数组更新后组件不会自动同步数据源
• 未对重复值去重，补全选项会出现大量重复项

修正方案 #

通过动态生成数据源、优化事件监听逻辑来实现需求：

• 仅在输入框失去焦点（blur）时记录最终输入值，避免捕获中间输入过程
• 使用动态数据源函数，每次触发补全时重新收集所有其他输入框的非空、去重后的值
• 配置Autocomplete的source为函数形式，确保每次补全都使用最新数据

完整修正代码 #

<form>
    <input type="text" class="name" id="name1">
    <input type="text" class="name" id="name2">
    <input type="text" class="name" id="name3">
    ...
    <input type="text" class="name" id="name100">
    <input type="submit" value="Send">
</form>
<script>
$(document).ready(function() {
    // 动态生成补全数据源：收集其他输入框的非空、去重值
    function getAutocompleteSource(excludeId) {
        const values = [];
        $('.name').each(function() {
            const inputVal = $(this).val().trim();
            // 排除当前输入框，仅添加非空且未重复的值
            if (this.id !== excludeId && inputVal && !values.includes(inputVal)) {
                values.push(inputVal);
            }
        });
        return values;
    }

    // 初始化所有输入框的Autocomplete
    $('.name').autocomplete({
        source: function(request, response) {
            // 获取当前输入框外的所有有效输入值
            const sourceData = getAutocompleteSource(this.element.attr('id'));
            // 过滤出包含当前输入关键词的选项（匹配默认补全逻辑）
            const matchedItems = sourceData.filter(item => 
                item.toLowerCase().includes(request.term.toLowerCase())
            );
            response(matchedItems);
        },
        minLength: 1 // 输入至少1个字符才触发补全
    });

    // 输入框失去焦点时，重新初始化当前框的Autocomplete，确保后续补全用最新数据
    $('.name').on('blur', function() {
        $(this).autocomplete('destroy').autocomplete({
            source: function(request, response) {
                const sourceData = getAutocompleteSource(this.element.attr('id'));
                const matchedItems = sourceData.filter(item => 
                    item.toLowerCase().includes(request.term.toLowerCase())
                );
                response(matchedItems);
            },
            minLength: 1
        });
    });
});
</script>

效果验证 #

按照你的期望场景测试：

1. 在#name1输入Jon Doe后离开输入框
2. 切换到#name2输入J，会显示补全选项Jon Doe
3. 在#name2输入Joanna Doe后离开输入框，切换到#name3输入J，会显示Jon Doe和Joanna Doe两个补全选项

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