Update autocomplete source array using AJAX


Topic: Update autocomplete source array using AJAX

kewal pro asked 3 years ago

Expected behavior

Updating the source data array after initializing mdb_autocomplete displays the auto-complete list with new elements added to the source array after completing an AJAX call.

Actual behavior

Updating the data source array after initializing mdb_autocomplete displays no elements in the auto-complete list, even though new elements are added to the source array after completing an AJAX call.

Resources (screenshots, code snippets etc.)

    const primaryAddressInput = $("#primary-address");
primaryAddressInput.on("keydown", function(e) {
  if ($(this).val().length < 3) return;
  const string = e.target.value;
  suggestions(string) //ajax call to fetch a list of addresses
    .done(res => {
      $("#primary-residential-address").mdb_autocomplete({
        // data: ["Sydney", "Melbourne"] // Static array works fine
        data: res.map(element => element.address) // also tried using data: [Date.now().toString()] but autocomplete didn't work
      });
      console.log(res); // Prints the object containing a list of addresses in the console
    })
    .fail(err => {
      console.error(err);
    });
});

MDBootstrap staff commented 3 years ago

Hi! Can you show me example of the data you are trying to initialize in autocomplete? Something printed in the "console.log(res);". Another problem might be that we check if data.length!=0 and at moment of initialization the value you are trying to assign to the data might not exist before inicjalization. Maybe assign the "res.map(element => element.address" to variable before initialization of autocomplete?


kewal pro commented 3 years ago

Hi Piotr, Thank you for your response. As per your recommendation, I have updated the code to - suggestions(string) .done(res => { let result = res.map(element => element.address); console.log(result); $("#primary-residential-address").mdb_autocomplete({ data: result }); }) .fail(err => { console.error(err); });

The result in the console when I type, "150 fovea" is,  ["150 Foveaux Street, Surry Hills NSW, Australia", "150 Five Acre Row, Westbury TAS, Australia", "150 Five Mile Creek Road, Damper Creek QLD, Australia", "150 Foveaux Avenue, Lurnea NSW, Australia", "150 Foveaux Street, Ainslie ACT, Australia"].

Still, the auto-complete does not appear. Sometimes it appears when I swipe my desktop left or right using Mission Control on my Mac OS (https://support.apple.com/en-au/HT204100)


MDBootstrap staff commented 3 years ago

It may be foolish question but I need to ask about that because you didn't cover it. Do you click on autocomplete and try to type something and pick something from the list or you just expect it to show the autocomplete posibilities after inicialization? To avoid my future basic questions please provide a demo of your problem so I can test it and try to find solution for you.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.0
  • Device: Laptop
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No