I've been working on implementing materialize autocomplete in my project and have been facing issues with the dropdown not appearing. I tried using materialize version 0.98.2 from CDN as suggested, but it still doesn't seem to work. I suspect there might be a problem with triggering the dropdown, or perhaps an issue with the data not being utilized correctly.
While I am able to retrieve and use the data without any problems, the dropdown functionality simply won't work.
Here's the HTML:
<div class="input-field">
<label for="country">Autocomplete</label>
<input type="text" id="company" class="autocomplete">
</div>
And here is my JavaScript code:
var company = document.getElementById("company");
company.addEventListener("input", function () {
$(function() {
var inputValue = $('#company').val();
var url = 'https://sandbox.iexapis.com/stable/search/'
+ encodeURIComponent(inputValue)
+ '/?token=****************';
$.ajax({
type: 'GET',
url: url,
success: function(response) {
var companyArray = response;
var dataCompany = {};
for (var i = 0; i < companyArray.length; i++) {
//console.log(countryArray[i].name);
console.log(url);
dataCompany[companyArray[i].securityName] = companyArray[i].symbol;
console.log(companyArray[i].securityName);
console.log(companyArray[i].symbol);
}
$('input.autocomplete').autocomplete({
data: dataCompany
});
}
});
});
});
As requested, here are some screenshots of what happens when I enter "wa":
https://i.sstatic.net/QzydI.png
The issue seems to be that while the data is present, the dropdown selector box fails to appear.