Question

我有一个包含一些输入字段的页面。此页面中的数据将发送到服务器，而不使用表单提交。我有一个JavaScript来收集数据，创建一个JSON并使用Ajax调用将其发送到服务器。

在这种情况下的问题是浏览器不保存数据，以便在用户下次填写相同表单时提供自动完成功能。

有什么方法可以避免这种情况吗？我需要一种方法来提供自动完成功能！任何诡计？

Answer 1

我使用html5浏览器存储来处理这些事情。有一个很好的介绍here这允许大多数现代浏览器在客户端的数据持久性。您可以使用它来捕获表单数据并根据需要重新呈现它。

Answer 2

您是否尝试过Trigger autocomplete without submitting a form中列出的方法。这对我有用。

基本上触发单击表单的提交按钮并获取表单以在隐藏的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>

然后在通过ajax处理表单时使用$("#submit-button").click()触发提交。

Answer 3

您可以尝试：使用jQuery自动完成

＆＃13;

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

＆＃13;

<div ng-app='MyModule'>
    <div ng-controller='DefaultCtrl'>
        <input auto-complete ui-items="names" ng-model="selected">
        selected = {{selected}}
    </div>
</div>

＆＃13;

http://jsfiddle.net/sebmade/swfjT/

希望这对你有帮助！

Answer 4

我发现当附加了实际表单并且实际触发了其提交事件时（即使数据是由AJAX发送的），自动完成也能正常工作。我建议使用带有提交按钮的表单，并通过Javascript拦截提交（附加到表单的onsubmit事件）以防止它并通过AJAX执行。

使用正确的HTML表单并阻止提交，而不仅仅使用输入字段，还可以在用户按Enter键时激活onsubmit处理程序。我觉得这对用户非常有用。

HTML输入自动完成

4 个答案: