Автозаполнение ввода 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, когда пользователь нажимает клавишу ввода. Я нахожу это довольно полезным как пользователь.