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

score 7 · Accepted Answer · answered Jan 09 '20 at 14:13

7

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");
});

answered Jan 09 '20 at 14:13

Rene Arteaga

334
3
6

score 3 · Answer 2 · answered Mar 14 '19 at 21:01

3

This works fine:

initComplete: function() {
                $(this.api().table().container()).find('input').parent().wrap('<form>').parent().attr('autocomplete', 'off');
            }

answered Mar 14 '19 at 21:01

user11205533

31
1

score 1 · Answer 3 · answered Sep 17 '21 at 11:12

I tried all your solutions but no one works with me, this is how I have managed this issue:

preDrawCallback: function() {
                let el = $('div.dataTables_filter label');
                if(!el.parent('form').length) {
                    el.wrapAll('<form></form>').parent()
                    .attr('autocomplete', false)
                    .attr('autofill', false);
                }
            }

I use the preDrawCallback instead of the initComplete callback, but as the preDrawCallback is fired on each raw, I add an if statement to avoid multiple wrapping of form tag.

Regards;

score 0 · Answer 4 · answered May 24 '23 at 10:39

<input type="text" style="display:none; visibility:hidden;">
<input type="password" style="display:none; visibility:hidden;">

Adding this code will be the easiest method

How to disable chrome autocomplete in searchbox of jQuery DataTable

4 Answers4