phphtml-datalist

Dynamic datalist option no showing

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. enter image description here

However the datalist popup is not showing with the options dynamic data enter image description here

Solution

  • 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.