JQuery Autocomplete新增字段不实时更新：需页面刷新才生效

DevOps 小满

2026-5-15

嘿，我来帮你搞定这个Autocomplete实时更新的问题！

你的核心问题在于：jQuery Autocomplete组件初始化时绑定的是bookername数组的初始引用，后续你通过Ajax往数组里追加数据时，组件并不会自动感知到数组内容的变化；另外你在focusout时直接清空数组的操作，也会导致数据源反复丢失，进一步加剧了更新不及时的问题。

解决方案拆解

1. 调整数据源维护逻辑

首先去掉focusout里清空数组的代码——每次聚焦都清空+重新请求不仅没必要，还会让之前的数据白白丢失，我们要维护一个稳定的数据源。

2. 主动更新Autocomplete的Source

这是关键！每次Ajax获取到新数据后，不能只往数组里push，还要调用Autocomplete的option方法，主动告知组件数据源已更新。

3. 优化请求（可选但推荐）

加个加载状态标记，防止用户快速重复聚焦时发送冗余请求，减轻服务器压力。

修改后的完整代码

// 初始化全局/作用域内的数据源
let bookername = [];
let isLoading = false; // 防止重复请求的标记

$("#booker_name").autocomplete({
    source: bookername,
    select: function(event, ui) {
        $(this).val(ui.item.label);
        $("#booker_phone").val(ui.item.booking_phoneno);
        $("#booker_email").val(ui.item.booking_email);
        return false;
    }
}).focus(function() {
    // 如果正在加载或已有数据，直接返回避免重复请求
    if (isLoading || bookername.length > 0) return;

    isLoading = true;
    $.getJSON(url + companyId + '/', function(data) {
        // 合并新数据到数据源（可根据需求选择覆盖或追加）
        bookername = [...bookername, ...data];
        // 核心操作：更新Autocomplete的数据源
        $("#booker_name").autocomplete("option", "source", bookername);
        console.log(bookername);
    }).always(function() {
        // 请求完成后标记加载结束
        isLoading = false;
    });
});

// 添加Booker的Ajax请求部分
$.ajax({
    url: '/rapido/api/get_booker_list/',
    method: "POST",
    headers: {
        'X-CSRFToken': '{{ csrf_token }}'
    },
    contentType: 'application/json',
    data: JSON.stringify(booker),
    success: function(res) {
        swal({
            title: "Booker details added successfully",
            icon: "success"
        });

        // 新增成功后，同步更新Autocomplete数据源
        // 方式1：如果接口返回了新增的Booker对象，直接追加
        // bookername.push(res.newBooker);
        // $("#booker_name").autocomplete("option", "source", bookername);

        // 方式2：重新拉取完整列表（更稳妥，确保数据完全同步）
        $.getJSON(url + companyId + '/', function(data) {
            bookername = data;
            $("#booker_name").autocomplete("option", "source", bookername);
        });
    }
});

关键细节说明

$("#booker_name").autocomplete("option", "source", bookername)：这行代码是让Autocomplete实时更新的核心，它强制组件使用最新的数据源，无需刷新页面。
加载状态isLoading：避免短时间内多次触发请求，提升用户体验和性能。
新增Booker后的同步：根据你的接口返回情况，选择直接追加新数据或重新拉取完整列表，确保Autocomplete能立刻拿到最新的可选值。

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