HTML 输入自动完成

Question

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

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

有什么办法可以避免这种情况吗？我需要一种提供自动完成功能的方法！有什么诀窍吗？

Answer 1

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

Answer 2

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

基本上触发点击表单的提交按钮，并让表单在隐藏的 iframe 中打开一个空白页面。这显然是一个 hack，但它实际上是单击表单提交按钮，提交表单并打开一个新页面，因此它自然地适用于我签入的每个浏览器。

在这里引用示例标记：

<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

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

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

Answer 4

你可以试试这个：用 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>

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

希望对您有所帮助！