jquery - 如何使用自动填充字段根据用户选择填写整个表单？

Question

我有一个用户可以填写的表单，该表单映射到 Rails 中的一个对象。

表单中的字段之一会自动完成已创建的对象的实例。

我试图做到这一点，以便如果在该字段上选择自动完成选项，它将根据该实例的数据填写整个表单。

我假设完成此操作的最佳方法是在选择自动完成功能后通过 ajax 调用来获取所有数据并重新呈现表单？这似乎会在自动完成字段和自动填充表单之间产生不希望的延迟。

那么是否可以在自动完成数据中包含所有必要的数据并立即自动填写表单？

Answer 1

如果您想即时访问数据，则需要预加载它。有很多方法可以做到这一点。但考虑到您正在使用 AJAX 自动完成(我的假设)，您似乎已经决定忍受 AJAX 请求往返服务器时的一点点延迟。鉴于此，一旦用户选择了自动完成字段值，此时只需通过 AJAX 加载相应的数据即可。如果延迟对您来说太长，请考虑使用“旋转”图形。这是当今网络上常见的范例，如果需要 < 0.5 秒，没有人会三思而后行。

对于正在填写的表单 - 在某些时候，您需要迭代对象或表单字段，并使用对象中相应的值填充它们。此处使用命名约定可以帮助您，例如，考虑让表单的输入具有与对象中的实例变量名称相对应的类名称，例如:

var instance = {
   name:'chapmand',
   beard:'brown',
   reputation:26
}

然后，您的表单可能包含以下字段:

<form id="my-form" ...>
    <input class="name" type="text"></input>
    <input class="beard" type="text"></input>
    <input class="reputation" type="text"></input>
    ...
</form>

最后，将对象实例与用户输入的内容进行匹配后，请执行以下操作:

$('#my-form input.data').each(function(){
    $(this).val(instance[$(this).attr('class')]);
});

当然是人为的示例，并且有很多方法可以实现它，但这可能会帮助您入门。

干杯