我有一个包含一些输入字段的页面。此页面中的数据将发送到服务器,而不使用表单提交。我有一个JavaScript来收集数据,创建一个JSON并使用Ajax调用将其发送到服务器。
在这种情况下的问题是浏览器不保存数据以便在用户填写相同表单时下次提供自动完成。
有什么办法可以避免这个吗?我需要一种方法来提供自动完成功能!任何诡计?
我有一个包含一些输入字段的页面。此页面中的数据将发送到服务器,而不使用表单提交。我有一个JavaScript来收集数据,创建一个JSON并使用Ajax调用将其发送到服务器。
在这种情况下的问题是浏览器不保存数据以便在用户填写相同表单时下次提供自动完成。
有什么办法可以避免这个吗?我需要一种方法来提供自动完成功能!任何诡计?
我使用html5浏览器存储来处理这些事情。有一个非常好的介绍 这里 这允许大多数现代浏览器在客户端上的数据持久性。您可以使用它来捕获表单数据并根据需要重新呈现它。
你可以尝试这个:使用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/
希望这对你有所帮助!
你有没有尝试过的方法? 触发自动填充而不提交表单。这对我有用。
基本上触发单击表单的提交按钮并获取表单以在隐藏的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处理表单时。
当附加了实际表单并且实际触发了其提交事件时(即使数据是由AJAX发送的),我发现自动完成功能正常工作。我建议使用带有提交按钮的表单,并通过Javascript拦截提交(附加到表单的 onsubmit
事件)以防止它并通过AJAX执行。
使用正确的HTML表单并阻止提交,而不是仅仅使用输入字段,也可以激活您的 onsubmit
用户按Enter键时的处理程序。我发现作为用户非常有用。