HTML输入自动完成

Question

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

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

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

Answer 1

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

使用合适的HTML表单并阻止提交，而不是仅使用输入字段，还可以在用户按下Enter时激活您的onsubmit处理程序。我发现这对用户非常有用。

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

我使用html5浏览器存储这些东西。有一个相当不错的介绍here这允许在大多数现代浏览器的客户端数据持久化。您可以使用它来捕获表单数据并随时重新渲染它。使用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/

希望这有助于你：

Answer 4

你可以试试这个！