DataTable añadir buscador por columna parte superior

codigo.html

<table id="tableListarItems" class="table table-hover table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed">
    <thead>
    <tr>
        <th>Id</th>
        <th>Referencia 1</th>
        <th>Referencia 2</th>
        <th>Descripción</th>
        <th>Modelo</th>
        <th>Detalle</th>
        <th>Comando</th>
    </tr>
    <tr>
        <th>Id</th>
        <th class="buscar">Referencia 1</th>
        <th class="buscar">Referencia 2</th>
        <th class="buscar">Descripción</th>
        <th class="buscar">Modelo</th>
        <th class="buscar">Detalle</th>
        <th></th>
    </tr>
    </thead>
</table>

codigo.js

orderCellsTop: true,

initComplete: function () {  
      
    $('#tableListarItems thead tr:eq(1) th.buscar').each( function () {
        $(this).html( '<input type="text" class="form-control" style="width:100%;"/>' );
    });

    table.columns([1,2,3,4]).every(function (index) {
        $('#tableListarItems thead tr:eq(1) th:eq(' + index + ') input').on('change', function () {
            table.column($(this).parent().index() + ':visible')
                .search(this.value)
                .draw();
        });
    });      

}