Search Input of the table auto fill with the email ID

Search Input of the table auto fill with the email ID

FreelancerFreelancer Posts: 20Questions: 1Answers: 0

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

This question has accepted answers - jump to:

«1

Answers

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406
    edited 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();
        });
    
  • FreelancerFreelancer Posts: 20Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406

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

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

  • FreelancerFreelancer Posts: 20Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    edited 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

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406

    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;
                }
            }
        }
    } );
    
  • FreelancerFreelancer Posts: 20Questions: 1Answers: 0

    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!

  • FreelancerFreelancer Posts: 20Questions: 1Answers: 0

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

  • FreelancerFreelancer Posts: 20Questions: 1Answers: 0

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • FreelancerFreelancer Posts: 20Questions: 1Answers: 0

    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...

  • FreelancerFreelancer Posts: 20Questions: 1Answers: 0

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

  • FreelancerFreelancer Posts: 20Questions: 1Answers: 0

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

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406

    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
    }
    
  • FreelancerFreelancer Posts: 20Questions: 1Answers: 0
    edited April 2023

    Sorry, how that works? @rf1234

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406
    edited 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()

  • FreelancerFreelancer Posts: 20Questions: 1Answers: 0

    Error in console: table. Searchis not a function

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406
    edited 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 :smile:

    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();
            }
        }
    };
    
  • FreelancerFreelancer Posts: 20Questions: 1Answers: 0

    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!

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406

    @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()".

  • FreelancerFreelancer Posts: 20Questions: 1Answers: 0

    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.

  • FreelancerFreelancer Posts: 20Questions: 1Answers: 0

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

  • FreelancerFreelancer Posts: 20Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    edited 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.

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406

    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);
    }
    
  • FreelancerFreelancer Posts: 20Questions: 1Answers: 0

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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    edited April 2023 Answer ✓

    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

Sign In or Register to comment.