I've been attempting to implement an auto-complete dropdown feature with dynamic data, but I'm facing an issue where no suggestions are displayed in the dropdown. I found this example on Datalists: https://getbootstrap.com/docs/5.1/forms/form-control/ which works perfectly fine with predefined option tags.
<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
... dynamic data here
</datalist>
I am able to receive data from the PHP script and access it correctly, but I suspect that the issue may be related to a delay in fetching the data. The HTML might expect the data to already be present when loaded, which could explain why it works with existing data.
Below is the JavaScript code within the fetch function responsible for dynamically creating the option tags:
var select = document.getElementById("datalistOptions");
select.innerHTML = "";
for (var key in data['result']) {
var val = data['result'][key];
if (data['result'].hasOwnProperty(key) && key != "error") {
var val = data['result'][key];
if (val != "") {
var option = document.createElement("option");
option.value = val.id;
select.appendChild(option);
}
}
}
Update: I made some modifications to the JavaScript code. Now it utilizes appendChild instead of the add function. The previous version was not adding any options to the datalist. Although appendChild does add options to the list, it doesn't display them.