1
votes

Comment désactiver la saisie semi-automatique de Chrome dans les barres de recherche de la table jquery

Récemment, j'ai remarqué que Google Chrome a commencé à compléter automatiquement toutes les barres de recherche générées dynamiquement lorsque nous construisons la table jquery. Tous ces champs ne font pas partie d'un formulaire, mais Google décide d'y suggérer des valeurs de connexion. J'ai essayé de résoudre le rappel d'initialisation et de jouer avec la propriété autocomplete mais aucune des solutions ci-dessous ne ferait l'affaire. Je n'ai pas rencontré le même problème dans Firefox / Safari. Toute aide pour comprendre le problème sera très appréciée.

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

voici comment nous initialisons la 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');
    }
});

voici à quoi ressemble la barre de recherche générée

autocomplete="off"
autocomplete="false"
autocomplete="autocompleterandom"

après quelques heures de recherche, cela semble être une "fonctionnalité" de chrome et pour le moment, chrome suggère des mots de passe enregistrés dans toute l'application :(

https://bugs.chromium.org/p/chromium/issues/detail?id=587466 a >

html google-chrome autocomplete

0 commentaires

3 Réponses :

1
votes

Cela fonctionne bien:

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

0 commentaires

3
votes

J'ai eu le même problème et la solution était de mettre ces deux lignes:

$(document).ready(function(){
  $("input[type='search']").wrap("<form>");
  $("input[type='search']").closest("form").attr("autocomplete","off");
});

0 commentaires

-1
votes

Il existe une autre option. En gros, vous devez attendre que Chrome effectue la saisie semi-automatique, puis définissez la valeur de recherche d'entrée sur '' . Le 250 peut être modifié. Vous pouvez ajouter un paramètre supplémentaire à l'initiation Datatable comme ceci:

initComplete: function() {
    setTimeout(() => {
        $('input[type="search"]').val('');
    }, 250)
},

0 commentaires