JQuery autocomplete - Unable to set the source dynamically

Question

I am trying to do the following. I have a date picker. When I select a date (during data change event), I am doing a ajax call to get data that I need to populate in a autocomplete drop down. When the page loads for the first time, the autocomplete box will be empty. As and when the date is changed or selected, the autocomplete box should populate accordingly. Please check my code below.

When I initiate the dataSrc variable, the drop down loads for the first time without any issues. The issue that I am having is with the dynamic population, the data that I am fetching from the ajax call is not being set in the autocomplete source dynamically.

Please advice.

    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.')
            }
        })
    });
    });

I tried pushing all data into dataSrc, but that doesn't seem to work. However, If i use the option method and set the source, that seems to work. However, I have to be cautious to pass data directly to source and JSON.stringify(data) to source. You are awesome! Thank you! — SaAn
– SaAn, Commented May 23, 2018 at 15:55

SaAn · Accepted Answer · 2018-05-23 16:00:54Z

1

dataSrc = JSON.stringify(data); replaces what dataSrc points to. It does not change the original array element that was given to the autocomplete.

You could try pushing all the elements from the data into the dataSrc, which would cause the array that dataSrc originally pointed to, to not change, but get new values.

Or if that does not work, you may have to use the https://api.jqueryui.com/autocomplete/#method-option method to change the source option for the autocomplete.

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

edited May 23, 2018 at 16:00

SaAn

4526 silver badges23 bronze badges

answered May 23, 2018 at 15:58

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Taplar Over a year ago

@SaAn aaaah, I missed the dataType : "json" in your ajax request that would have already parsed it.

dev-cc · Accepted Answer · 2018-05-23 15:50:26Z

0

Inner your success function you need to destroy the old autocomplete and redraw it. Maybe, you need to create a function to create the autocomplete ('drawAutocomplete').

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

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

answered May 23, 2018 at 15:50

dev-cc

4543 silver badges13 bronze badges

Collectives™ on Stack Overflow

JQuery autocomplete - Unable to set the source dynamically

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related