Topic: Update autocomplete source array using AJAX
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);
});
});
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Open
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
Related topics
MDBootstrap staff pro premium commented 5 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 5 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 pro premium commented 5 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.