Search when cells rendering with textboxes

Hi,

I'm using render to display the data in a textbox. The problem is when I use the built-in search feature it doesn't find the data. I know that it only works when I render the data with a visible html element like a label. I'm using knockout and I use this as an example: https://datatables.net/dev/knockout/

Here is the DataTable references I use:

<link rel="stylesheet" href="https://nightly.datatables.net/css/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.2.7/css/rowReorder.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.24/sorting/custom-data-source/dom-text.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.24/sorting/custom-data-source/dom-text-numeric.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.2.7/js/dataTables.rowReorder.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js"></script>

HTML
<table id="coverages-datatable" class="table dt-responsive w-100 table-bordered sticky-table-header" data-bind="dataTableCoverages: { Data: coverages(), ModelName: 'CoveragesDataTable' }"></table>

JS:

var policy = function(){
var self = this;

self.coverages = ko.observableArray();

self.coverages.push({
    coverage_description: "Coverage 1"
});

self.coverages.push({
    coverage_description: "Coverage 2"
});

self.coverages.push({
    coverage_description: "Coverage 3"
});

}

ko.bindingHandlers.dataTableCoverages = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {

    let value = valueAccessor();

    let dt = $(element).DataTable({
        processing: true,
        deferRender: true,
        rowId: "array_id",
        order: [],
        info: false,
        paging: false,
        columns: [
            {
                data: "coverage_description()",
                title: "Coverage",
                render: function (data, type, row) {
                    return '<div class="input-group ko-element">' +
                        '<input class="form-control coverage-autocomplete" type="search" placeholder="Type in a coverage" autocomplete="on" data-bind="value: coverage_description"  />' +
                        '</div>';
                },
                orderDataType: "dom-text",
                type: "string",
            },
        ],
        createdRow: function (row, data, dataIndex) {

            let $koElements = $(row).find(".ko-element");

            $koElements.each(function (index, element) {
                ko.applyBindings(data, element);
            });
        }
    });

    bindingContext.$root.CoveragesDataTable = {
        add: function (addedItem) {
            dt.row.add(addedItem).draw();
        },
        delete: function (deletedItem) {
            var rowIdx = -1;
            // Find the index of the deletedItem. 
            ko.utils.arrayForEach(dt.columns(0).data()[0], function (item, index) {
                if (item.array_id() == deletedItem.array_id()) {
                    rowIdx = index;
                }
            });

            if (rowIdx != -1) {
                dt.row(rowIdx).remove().draw();
            } 
        }
    };

    setTimeout(function () {
        ko.utils.arrayForEach(value.Data, function (dataItem) {
            dt.row.add(dataItem).draw();
        });
    }, 800);

}

}