Search Input of the table auto fill with the email ID

Freelancer

So, I'm using Datatable for awhile but recently I noticed the search input of the table auto fill with the email ID I have used to login and this cause No Record Match result...

it is very bothering.

Can anyone help? I don't want to disable the search function.
Thanks

rf1234

On "init" of the data table turn autocomplete off:

Something like this could work:

table
    .on ('init', function () {
        $('*[type="search"][class="form-control"]').attr('autocomplete','off');
        table.search("").draw();
    });

Freelancer

I still have the same issue after adding attr "autocomplete" off.

kthorngren

Does it auto fill on page load or when you click on the input to perform a search?

stateSave will restore the last search term on page reload but that doesn't sound like the problem. Other than stateSave there isn't anything else built into Datatables that provide this type of behavior. Please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Maybe a browser setting. Have you tried different browsers?

Kevin

rf1234

table.search("").draw();

Should also clear the search field. I would experiment by adding a timeout so that autocomplete content gets cleared.

Freelancer

I tried both Google Chrome and Edge, it will auto fill after loading the page which shouldn't do really..

But one thing, We have a login form that usually auto fill with email and password but those are email and password and they should be different right? Even the browser can detect that part.

kthorngren

it will auto fill after loading the page which shouldn't do really..

Do you have stateSave enabled?

Do you have some code that does something with the email value after the form when the page loads? Maybe it is accidentally populating the search input.

I don't believe the browser will start the autocomplete process for an input until the user starts typing.

Kevin

rf1234

Do you have stateSave enabled?

That really can cause issues. In my data table init defaults I turn state loading off for search, select and ordering like this. Maybe that helps.

$.extend( true, $.fn.dataTable.defaults, {
    stateLoadParams: function (settings, data) {
        if ( typeof data !== 'undefined' ) {
            if ( typeof data.search !== 'undefined') {
                data.search.search = "";
            }
            if ( typeof data.select !== 'undefined') {
                data.select.rows = [];
            }
            if ( typeof data.order !== 'undefined') {
        //passing an empty array will lead to no ordering at all
        //deleting will allow for the default table ordering
                delete data.order;
            }
        }
    }
} );

Freelancer

This only happens with two tables that contain Email address as column...

I really think this is mostly related to that...

I added autocomple off or false or nope any random never worked..

Also this is more info by my friend:
When I logged in with the new Chrome browser the search box was empty. But when I said to save the login info, the email appeared in the search box. It does it as long as the login info is saved. If I remove the login info the email address disappears upon the next login!

Freelancer

As about State save, no it is disabled ...

Freelancer

kthorngren

But when I said to save the login info, the email appeared in the search box. It does it as long as the login info is saved.

Sounds like the problem is with this process. How are you saving and restoring the login info? I suspect when its restored the process is also populating the the search field. Can you post a link to your page or a test case showing this process so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

This problem doesn't seem to be a Datatables specific issue but in how the login info is restored.

Kevin

Freelancer

I don't really save the login info, it is the browser that it does save login info, give me sometime will try to use one of those test cases to show you...

Freelancer

Okay so, temporally I have it uploaded here:
ShortURL: https://rb.gy/9etlq
User: jim@test.com
Pass: 1234@@4321

Freelancer

Please login, Then save login info inside the browser when it asks you. ...

rf1234

Amazing, the browser thinks it is a login field. Have you tried this?

"initComplete": function(settings, json) {
  // Add autocomplete="off" to the search input field
  // $('input[type="search"]').attr('autocomplete', 'nope').attr('autofocus','false');
  table.search("").draw();
  // if that doesn't work, use it with a timeout of 200, for example
}

Freelancer

Sorry, how that works? @rf1234

rf1234

it clears the search field and redraws the data table based on that

https://datatables.net/reference/api/search()

https://datatables.net/reference/api/draw()

Freelancer

Error in console: table. Searchis not a function

rf1234

Then something is wrong with your data table configuration. That would explain why your browser thinks your search field is a login field. Apparently it is NOT DataTable's global search field.

Can't help you with that but maybe Kevin can. Kevin's in the US - so it is still a bit early for him

Here is a code example from my own coding that has a custom button that erases the search field and redraws the table based on that. So that really works ...

//custom button added with language specific label
$.fn.dataTable.ext.buttons.showAll = {
    text: showAllLabel,
    className: 'btn-showall-color hidden',
    name: "showAllButton",
    action: function ( e, dt, button, config ) {
        dt.rows({ selected: false }).nodes().to$().removeClass('hidden');
        dt.rows({ selected: true }).deselect();            
        dt.buttons('showAllButton:name').nodes().addClass('hidden');          
        //if show all button is clicked, a potential search will be reset and the table is redrawn.
        if (dt.search() > '') {
            dt.search('').draw();
        }
    }
};

Freelancer

I hope he comes online soon, Also, nothing really odd about my code! Even checking in the console, I don't see a search function available!

allan

I've seen that behaviour in an old version of Chrome before - its bonkers and I'm certain it is a Chrome bug. What version are you using @Freelancer?

Regarding the error in the console at the moment - it is because your table initialisation is synchronous. You can do:

initComplete: function () {
  this.api().search('').draw();
}

I'm absolutely certain this is a browser bug though. Maybe it happens if the input field doesn't have a name attribute...

Allan

rf1234

@allan @Freelancer, yep, sorry I confused that. I hardly ever use "initComplete" but rather the "init" event handler. In that case you don't need "this.api()".

Freelancer

Thanks Allan and rf1234, Well as for the version am using latest version of Google Chrome.. I don't use it really but installed it yesterday for the purpose of testing this only.. As my friend is using Chrome.

Freelancer

To be exact: Version 112.0.5615.138 (Official Build) (64-bit)

Freelancer

Added a name attr to the search input.. no thing worked.. not even the search('').draw();

kthorngren

I found this thread which is not Datatables related with the same issue. Wonder if this workaround from the thread will help.

It does sound like a browser issue.

rf1234

I would also try to use search('').draw() with a timeout. That can do the trick!

initComplete: function () {
  setTimeout(function() {
        this.api().search('').draw();
    }, 300);
}

Freelancer

That doesn't help either, I need a solution for this really! it is very bothering !

allan

How are you loading DataTables? If it is a plain JS file, find:

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

and change it to be:

var input = '<input type="search" name="dt-search" class="'+classes.sFilterInput+'"/>';

See if that works-around the Chrome bug.

Allan

kthorngren

I also found this SO thread. So if the browser work around presented fixes the issue.

Please try both and report back whether they work.

Kevin