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);

Answer 2

内在你的成功功能，你需要销毁旧的自动完成并重绘它。也许，您需要创建一个功能来创建自动完成功能（＆＃39; drawAutocomplete＆＃39;）。

...
success : function(data) 
{
   dataSrc = JSON.stringify(data);

   $( "#dropdownselector" ).autocomplete( "destroy" );
   drawAutocomplete();
},
...

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

2 个答案: