Disable the Chrome autofill for the Table search

Question

I am using the angular-datatables where chrome auto fill the table search with the email-id.

I tried to override the search with the empty string but still chrome autofill the email-id

  dtTrigger: Subject<any> = new Subject();
  dtOptions: DataTables.Settings = {};

  this.dtOptions = {
  pagingType: 'full_numbers',
  pageLength: 10,
  "dom": '<"top"f>rt<"bottom"lip><"clear">',
  responsive: true,
  search :{
    search : " "
    }

};

so here search : "anything" it searchs for anything in the table, i tried null option empty string chrome auto fills with email id.

how can force chrome not to fill email in the search input.

I guess you have the entire table inside `
` ...? Chrome should not autopopulate an input without the form tag. — davidkonrad, Oct 28 '19 at 09:52
that is just a normal table when the component loads table with options loads from the type script check this link [Angular-datables](http://l-lin.github.io/angular-datatables/#/basic/zero-config) @davidkornad — Santhosh, Oct 28 '19 at 12:39

blackMagician · Answer 1 · 2019-10-24T13:49:55.183

1

I look in the Github repository to see how the hell it works.

I found a dependency on the jquery library in this documentation:

http://l-lin.github.io/angular-datatables/#/getting-started

npm install datatables.net --save

Later i searched inside of the jquery library for the input field.

/node_modules/datatables.net/js/jquery.dataTables.js

in the line 4182 i just added a property autocomplete="off"

var input = '<input type="search" autocomplete="off" class="'+classes.sFilterInput+'"/>';

Yep, it is a bit tricky, if it works let me know to make an pull request in the datatables github repository.

Update

Chrome intentionaly ignores autocomplete="off" and autocomplete="false" so use autocomplete="new-search"

I do not add the same tag in jquery.dataTables.min.js, and it is certain that the compiler is using the .min.js file

Find the next expresion inside of

/node_modules/datatables.net/js/jquery.dataTables.min.js

'<input type="search" class="'+b.sFilterInput+'"/>'

And replace for:

'<input type="search" autocomplete="new-search" class="'+b.sFilterInput+'"/>'

edited Oct 24 '19 at 13:49

answered Oct 23 '19 at 14:13

blackMagician

11
2

i tried this one still it is not working chrome still autofill search bar with the email-id @blackMagician – Santhosh Oct 24 '19 at 05:32
If you overwrite the input you should also add a random id attribute. Chrome uses the id of an input to find autofill recommendations. – Ludwig Oct 24 '19 at 10:56
In chrome to use autocomplete=off you have to add the input into a form – GaryB Oct 24 '19 at 12:23
Even tried with the updated code its not working @blackMagician – Santhosh Oct 28 '19 at 05:04

score 0 · Answer 2 · answered Oct 24 '19 at 12:27

0

if its acceptable for you here is a custom search for tables what im using:

html:

<form  [formGroup]="searchTableForm" (ngSubmit)="onSubmit()">
    <div class="tableSearchBox">
      <input class="tableSearch" required formControlName="search">
      </div>
</form>

.ts:

onSubmit(){
   this.datatableElement.dtInstance.then((dtInstance: DataTables.Api)=>{
     dtInstance.search(this.searchTableForm.value.search).draw()
   })
}

im running it every time when the forms value changes

answered Oct 24 '19 at 12:27

GaryB

378
1
9

as the angular-datatables is giving the search option i want to disable auto fill ,I dont want to create a new function just to search and again render into the table. @GaryB – Santhosh Oct 24 '19 at 13:18
okay then there is a SO post https://stackoverflow.com/a/30976223/9945674 – GaryB Oct 24 '19 at 13:29

Disable the Chrome autofill for the Table search

2 Answers2