Chrome for Android showing Auto-fill even if autocomplete: off

Question

I have a form with 4 fields where the user is supposed to enter two cities (From and To) and two dates (outbound and return date).

I have autocomplete:off, which works fine among most of the browsers. However, for Chrome on Android I get the annoying Auto-fill that overlaps my own suggestion drop-down list.

Trials

I have tried every single one of the suggested solutions from here and here, including:

1) Putting a hidden field before my fields in the form. Even with the same name as the first real field:

<input type="text" style="display:none" name="same_name_as_1st_field"/>

2) Hidding a div, instead of the input tag directly:

<div style="display: none;">
    <input type="text" name="same_name_as_1st_field" />
</div>

3) Changing from autocomplete="off" to autocomplete="false"

4) Browser autofill in by readonly-mode.

<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

5) autocomplete="new-password"

6) <form autocomplete="off" role="presentation">

7) With JQuery:

if ($.browser.webkit) {
    $('input[name="my_field_name"]').attr('autocomplete', 'off');
}

8) JQuery:

$(window).ready(function () {
    $('#my_id').val(' ').val('');
});

9) More complicated JQuery from here:

jQuery('body').on('mousedown keydown','[name="name"][autocomplete="off"],
[name="email"][autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    if(typeof this.currentName =="undefined")
        this.currentName=jQuery(this).attr('name');
    jQuery(this).attr('name','');
});
jQuery('body').on('blur keyup','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    if(typeof this.currentName !="undefined")
        jQuery(this).attr('name',this.currentName);
});

Please notice that for Solution 1 and 2, I just took the cases where the input name is "name" and "email". For any other case where this attribute makes Chrome generate the dropdown you will have to add it in the selector for the mouse down event.

10) Own idea: I realized that by giving the field a default value, the auto-fill does not show up. Then, I tried giving a default value and clearing that value on focus with javascript...

<script>
    $('#id_From').focus(function() {
        this.value = "";
    });
</script>

And none works.

Any idea of how to solve this?

Answer 1

Update (21-12-2017)

The old solution stopped working, so here is a new one.

The auto-fill is triggered with the following input tag:

<input type="search" name="To"  id="id_To" placeholder="a" class="autocomplete-city form-inner-field-city ui-autocomplete-input" autocomplete="off" maxlength="50" required="">

Key here are the fields name and id, which were the ones modified with the old solution. Apparently, Chrome identifies it as a field for Auto-fill. Thus, changing the name and id to something Chrome cannot identify seems to do the trick (for the moment).

For instance:

<input type="search" name="Dep"  id="id_Dep" placeholder="a" class="autocomplete-city form-inner-field-city ui-autocomplete-input" autocomplete="off" maxlength="50" required="">

---

OLD

Finally a solution that worked, from here:

It removes "name" and "id" attributes from elements and assigns them back after 1ms. Put this in document get ready.

$(document).ready(function() {
    $('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {

                var input = this;
                var name = $(input).attr('name');
                var id = $(input).attr('id');

                $(input).removeAttr('name');
                $(input).removeAttr('id');

                setTimeout(function () {
                    $(input).attr('name', name);
                    $(input).attr('id', id);
                }, 1);
            });
});