Search Input of the table auto fill with the email ID

Freelancer · April 2023

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 · April 2023

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 · April 2023

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

kthorngren · April 2023

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 · April 2023

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

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

Freelancer · April 2023

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 · April 2023

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 · April 2023

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 · April 2023

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 · April 2023

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

Freelancer · April 2023

kthorngren · April 2023

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 · April 2023

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 · April 2023

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

Freelancer · April 2023

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

rf1234 · April 2023

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 · April 2023

Sorry, how that works? @rf1234

rf1234 · April 2023

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 · April 2023

Error in console: table. Searchis not a function

rf1234 · April 2023

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 · April 2023

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 · April 2023

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 · April 2023

@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 · April 2023

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 · April 2023

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

Freelancer · April 2023

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

kthorngren · April 2023

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 · April 2023

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 · April 2023

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

allan · April 2023

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 · April 2023

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

Search Input of the table auto fill with the email ID

Search Input of the table auto fill with the email ID

Answers

Howdy, Stranger!

Categories

DataTables

Search Input of the table auto fill with the email ID

Search Input of the table auto fill with the email ID

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables