Dynamic datalist option no showing - php

Question

I'm trying to populate a datatable data dynamically with a datalist in one column using ajax server request.
From Php
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-clear btn-clear-datalist-dropdown"> <i class="fa fa-trash-o text-primary "></i></button>
</span>
<datalist id="dtlstTransferAcc" class="dropdown-menu-byval div-GL-list div-input-transferacc-list">
<option class="dropdown-item" data-id="0" value="Enter Input Tax Account keyword in the search box and press Enter">
<!-- dynamic list on ENTER keys-->
</datalist>
From the dynamic datalist I am able to send another ajax server request and populate the datalist options successfully.
Javascript
// target the datalist in same table row
var div_dropitem_list = $(this).closest('.input-datalist-dropdown').find('.div-GL-list');
$.ajax({
type: "POST",
url: "js/gl.php",
data: {
'a': 'GL-DATA-LIST',
'keyword': $(this).val(),
},
success: function(data) {
console.log(data);
$(div_dropitem_list).html(data);
}
});
Console log confirm the ajax data and the datalist options are populated.
However the datalist popup is not showing with the options dynamic data

Answer 1

You should specify the value attribute on each option in the datalist. That attribute is used to search in the list as well as providing a value to be selected in the input which is likely will be sent to the server.
In your case, you should have options with a value attribute, for example: <option value="4316 | Exchange" data-id="985" class="dropdown-item cursor-pointer">
Here's a simple demo:
<!-- to link an input with a datalist, the input must have a "list" attribute pointing to the datalist having the same "id" -->
<!-- in other words, input "list" attribute must be the same as datalist "id" -->
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
the above demo was taken from <datalist> Docs on MDN which i recommand taking some time there to learn more about datalist element.