Pentaho 6.1 - How to show a drop-down list of possible results when searching in a field?

Question

I have two fields where to look for the values ​​present in the first and fourth columns of the table. I would like to show a drop-down list of possible values ​​that start with the text I'm writing.

How can I change the following javascript function in the post-Execution of the table component to do it?

function f() {
    $(document).ready(function () {
        // Setup - add a text input to each footer cell
        var arrayColumns = ['ID', 'Type'];

        $('#example thead th').each(function () {
            var testo = $('#example thead th').eq($(this).index()).html();
            var title = $('#example thead th').eq($(this).index()).text();
            if (arrayColumns.indexOf(title) > -1) {
                $(this).html(testo + '<br><input type="text" placeholder="Search ' + title + '">');
            }
        });

        // DataTable
        var table = $('#example').DataTable();

        // Apply the search.
        table.columns().eq(0).each(function (colIdx) {
            $('input', table.column(colIdx).header()).on('keyup change clear', function () {
                table
                    .column(colIdx)
                    .search(this.value)
                    .draw();
            });
            // If you click in the field, it doesn't sort the results in the column in ascending/descending order.
            $('input', table.column(colIdx).header()).on('click', function (e) {
                e.stopPropagation();
            });
        });
    });
}