Можно отключить автозаполнение, если в момент фокусировки в поле поменять у поля значение name на произвольное. А когда пользователь выходит из input, то поменять значение name обратно. В этом случае браузер Хром не выводит подсказок, т.к. каждый раз значение name новое.
Необходимо подключать jquery, а ниже подключить сам скрипт.
Исходник (взял отсюда только код, который генерит значение name)
https://github.com/terrylinooo/jquery.disableAutoFill
Что получилось в итоге:
Это сама форма, показываю кусок формы, с полями ввода, для которых отключаю подсказки хрома. Оба инпута имеют класс "only-ru":
<form ..>
<input class="form-control city1 only-ru" type="text" name="city1" id="city1" placeholder="откуда" value="" autocomplete="off" >
<input class="form-control city2 only-ru" type="text" name="city2" id="city2" placeholder="куда" value="" autocomplete="off" >
...
</form>
Сам скрипт, который при фокусе генерит произвольное значение для name, а при выходе из фокуса - возвращает значение name обратно, как мне нужно. Можете его улучить, сделать более универсальным:
//поменять name при фокусе
$('.only-ru').on("focus", function(){
var realFields = [];
var realFieldsMapper = {};
$(this).each(function(i) {
realFields[i] = $(this).attr('name');
if(realFieldsMapper[realFields[i]]) {
$(this).attr('name', realFieldsMapper[realFields[i]]);
} else {
var randomName = Math.random().toString(36).replace(/[^a-z]+/g, '');
$(this).attr('name', randomName);
realFieldsMapper[realFields[i]] = randomName;
}
});
});
//поменять name обратно
$(document).mouseup(function (e){
var div1 = $("#city1"), div2 = $("#city2");
if (!div1.is(e.target)) $("input#city1").attr('name', 'city1');
if (!div2.is(e.target)) $("input#city2").attr('name', 'city2');
});