How to disable chrome autocomplete in searchbox of jQuery DataTable

Question

Recently I have noticed that google chrome started to autocomplete all the search bars generated dynamically when we build jquery table. All these fields are not part of a form, but google decides to suggest login values in them. I have tried to resolve initialization callback and play with autocomplete property but none of the below solutions would do a trick. I haven't faced the same issue in Firefox/Safari. Any help in understanding the problem will be very much appreciated.

autocomplete="off"
autocomplete="false"
autocomplete="autocompleterandom"

here is how we initialize the table

newTable$.DataTable({
    paging: true,
    pageLength: 20,
    lengthMenu: [15, 30, 60, 80],
    search: {
        search: _this.searchValues[newTable$.data('type')]
    },
    initComplete: function() {
        $('.section input[type="search"]').prop('name', 'autocompleterandom');
        $('.section input[type="search"]').prop('autocomplete', 'autocompleterandom');
    }
});

here is how the generated search bar looks like

<div id="DataTables_Table_1_filter" class="dataTables_filter"> . 
    <label>Search:
        <input type="search" class="" placeholder="" aria-controls="DataTables_Table_1" 
               name="autocompleterandom" autocomplete="autocompleterandom"> 
    </label>
</div>

after couple of hours researching this, it seems like a chrome "feature" and right now chrome suggests saved passwords all across the app :(

https://bugs.chromium.org/p/chromium/issues/detail?id=587466

Answer 1

I had the same issue and the solution was putting these two lines:

$(document).ready(function(){
  $("input[type='search']").wrap("<form>");
  $("input[type='search']").closest("form").attr("autocomplete","off");
});