Автозаполнение ввода HTML
У меня есть страница с некоторыми полями ввода. Данные с этой страницы отправляются на сервер без использования формы submit. У меня есть JavaScript, который собирает данные, создает JSON и отправляет его на сервер с помощью вызова Ajax.
Проблема в этом случае заключается в том, что браузер не сохраняет данные, чтобы предлагать автозаполнение в следующий раз, когда пользователь заполняет ту же форму.
Можно ли избежать этого? Мне нужен способ предложить автозаполнение! Любой трюк?
Ответы
Ответ 1
Я использую хранилище браузера html5 для таких вещей. В нем есть довольно хорошее введение здесь Это позволяет сохранять данные на стороне клиента для большинства современных браузеров. Вы можете использовать это, чтобы захватывать данные формы и повторно отображать их так часто, как вам нравится.
Ответ 2
Вы пробовали метод, описанный в Автозаполнение триггера без отправки формы. Это сработало для меня.
В основном вызвать щелчок на кнопке отправки формы и получить форму, чтобы открыть пустую страницу в скрытом iframe. Это, очевидно, взлом, но он буквально нажимает кнопку отправки формы, отправляет форму и открывает новую страницу, поэтому, естественно, она работает в каждом браузере, в котором я зарегистрировался.
Чтобы процитировать пример разметки здесь:
<iframe id="remember" name="remember" class="hidden" src="/content/blank">
</iframe>
<form target="remember" method="post" action="/content/blank">
<fieldset>
<label for="username">Username</label>
<input type="text" name="username" id="username" value="">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="">
</fieldset>
<button id="submit-button" type="submit" class="hidden"></button>
</form>
Затем запустите отправку с помощью $("#submit-button").click()
при обработке формы через ajax.
Ответ 3
Вы можете попробовать следующее: Автозаполнение с помощью jQuery
function DefaultCtrl($scope) {
$scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
}
angular.module('MyModule', []).directive('autoComplete', function($timeout) {
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
select: function() {
$timeout(function() {
iElement.trigger('input');
}, 0);
}
});
};
});
<div ng-app='MyModule'>
<div ng-controller='DefaultCtrl'>
<input auto-complete ui-items="names" ng-model="selected">
selected = {{selected}}
</div>
</div>
Ответ 4
Я обнаружил, что автозаполнение работает, когда есть прикрепленная действительная форма, и ее событие отправки было инициировано (даже если данные были отправлены AJAX). Я бы предложил использовать форму с кнопкой отправки и перехватить отправку через Javascript (присоединение к событию формы onsubmit
), чтобы предотвратить его и сделать это с помощью AJAX.
Использование надлежащей формы HTML и предотвращение отправки, вместо использования только поля ввода, также имеет преимущество активации вашего обработчика onsubmit
, когда пользователь нажимает клавишу ввода. Я нахожу это довольно полезным как пользователь.