如何在 jquery 表的搜索栏中禁用 chrome 自动完成功能答案

【问题标题】：How to disable chrome autocomplete in search bars of jquery table如何在 jquery 表的搜索栏中禁用 chrome 自动完成功能
【发布时间】：2019-07-22 07:39:44
【问题描述】：

最近我注意到，当我们构建 jquery 表时，google chrome 开始自动完成所有动态生成的搜索栏。所有这些字段都不是表单的一部分，但 google 决定在其中建议登录值。我试图解决初始化回调并使用autocomplete 属性，但以下解决方案都不能解决问题。我在 Firefox/Safari 中没有遇到同样的问题。任何有助于理解问题的帮助将不胜感激。

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

这是我们初始化表格的方式

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');
    }
});

这是生成的搜索栏的样子

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

经过几个小时的研究，这似乎是 chrome 的“功能”，现在 chrome 建议在整个应用程序中保存密码:(

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

【问题讨论】：

标签： html google-chrome autocomplete

【解决方案1】：

我遇到了同样的问题，解决办法是把这两行：

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

【讨论】：

【解决方案2】：

这很好用：

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

【讨论】：

【解决方案3】：

我尝试了您所有的解决方案，但没有人与我合作，这就是我解决此问题的方法：

preDrawCallback: function() {
                let el = $('div.dataTables_filter label');
                if(!el.parent('form').length) {
                    el.wrapAll('<form></form>').parent()
                    .attr('autocomplete', false)
                    .attr('autofill', false);
                }
            }

我使用 preDrawCallback 而不是 initComplete 回调，但是由于 preDrawCallback 是在每个 raw 上触发的，所以我添加了一个 if 语句以避免表单标签的多重包装。

问候；

【讨论】：