javascript - JQuery 自动完成 - 无法动态设置源

Question

我正在尝试执行以下操作。我有一个日期选择器。当我选择一个日期(在数据更改事件期间)时，我正在执行 ajax 调用来获取需要在自动完成下拉列表中填充的数据。当页面第一次加载时，自动完成框将为空。当更改或选择日期时，自动完成框应相应填充。请检查下面我的代码。

当我启动 dataSrc 变量时，下拉列表首次加载，没有任何问题。我遇到的问题是动态填充，我从 ajax 调用获取的数据没有在自动完成源中动态设置。

请指教。

    var dataSrc = [];
    $(document).ready(function() {
        $("#dropdownselector").autocomplete({
            source : dataSrc,
            change : function(event, ui) {
                $("#selector").val(0);
                $("#selector").val(ui.item.id);
            }
        }).focus(function() {
            $(this).autocomplete("search", " ");
        });

    $('#dateselector').on("changeDate", function() {
        $.ajax({
            type : "GET",
            url : "../getDropDownData",
            data : {
                "dateSelected" : $('#dataSelected').val()
            },
            contentType : "application/x-www-form-urlencoded; charset=utf-8",
            dataType : "json",
            async : true,
            cache : false,
            success : function(data) {
                dataSrc = JSON.stringify(data);
            },
            error : function(data) {
                alert('There was an error while fetching data.')
            }
        })
    });
    });

Answer 1

dataSrc = JSON.stringify(data); 替换 dataSrc 指向的内容。它不会更改提供给自动完成功能的原始数组元素。

您可以尝试将数据中的所有元素推送到 dataSrc 中，这将导致 dataSrc 最初指向的数组不会更改，而是获取新值。

或者，如果这不起作用，您可能必须使用 https://api.jqueryui.com/autocomplete/#method-option更改自动完成的源选项的方法。

$("#dropdownselector").autocomplete( "option", "source", data);