Jquery自动填充重复的表单字段

Posted 2023-02-24

【中文标题】Jquery自动填充重复的表单字段

【英文标题】：Jquery Autofill repeated form fields

【发布时间】：2015-02-28 02:43:44

【问题描述】：

我正在尝试为一组（可能）具有相同数据的表单字段创建自动填充功能。我的情况如下：我有一个表格，用户可以在其中输入公司内担任特定角色的人员（股东、高级职员、承包商、员工）的联系信息。所以，例如：

对于我拥有的股东：

First Name:
Last Name:
Email:
Telephone:
Street:
City:
State:
Zip:

对于导演，我有相同的字段：

First Name:
Last Name:
Email:
Telephone:
Street:
City:
State:
Zip:

通常，两者之间有很多重叠之处（董事通常是公司的股东）。因此，如果用户填写 Don Draper at 42 Bullet Park Road in Ossining NY 作为股东，然后想将他添加为董事，我希望提供某种自动填充功能来填写信息当他们开始填写主管职能时。

我想如果需要，我可以从头开始编写一个 javascript 插件，但我想知道我是否不需要重新发明***。 jquery中有什么东西可以为我处理大部分事情吗？或者是否有一套最佳实践来做到这一点？欢迎分享。

我当然不是在寻找任何人来为我写这篇文章，但如果你能推动正确的方向，我们将不胜感激。

预期的解决方法 我确实意识到，如果我只为普通人提供字段，然后在该人之上动态添加角色（股东、董事或其他），则可以避免这种需要。出于组织原因，我更喜欢按照我在上面描述的那样构建它。

非常感谢您的任何建议！

【问题讨论】：

所有表格都在一页上吗？还是有人一个接一个地填写一个表格，这意味着他们填写了一个表格，验证它，然后出现一个新的表格？

@Grimbode 您好，感谢您的回复。表单都在一个页面上，所以这个自动填充功能将全部在客户端。

【参考方案1】：

我继续做了一个小演示，如果它注意到名字相同，它将填写一个人。 http://jsfiddle.net/Grimbode/fqhrqwzt/1/（验证一个人..在填写输入行时单击复选框）

您需要创建一个搜索脚本客户端。为了能够有效地做到这一点并尽可能减少浪费时间，您将创建一个与每个正在填写的人相关的信息列表。

您需要先创建：

var persons = [];

下一部分你有几个选择：

您可以通过创建另一个 列表来填写persons，您可以在其中填写信息，如下所示： first: 'john', last: 'smith' /* ... */ 您可以像这样创建一个 Persons 类：

类：

function Person(o)
  this.first = o.first || 'unknown';
  this.last = o.last || 'unknown';
  //rest of the attributes

使用中

persons.push(new Person(
  first: 'john',
  last: 'smith'
));

然后你创建一个：（假设你的表单有一个类名'.person'）

$('.person input').on('keyup', function()
    var $this = $(this);
    var n = $this.attr('name'); //supposing the input name corresponds to the kind of input it is ( first, last, email, number, etc )
    var v = $this.val();

//now you need to loop through persons and see if you get a hit
$.each(persons, function(a, b)
        if(n === 'first' && b.first === v)
            $this.next().val(b.last);
        else if(n === 'last' && b.last ===v)
            $this.prev().val(b.first);
        
    );
);

您可能不想在他们每次按键时检查，而是在他们更改输入时检查。您必须使用 .on('change', function()) 事件。

不幸的是，我不确定是否已经存在类似的东西。如果是这样，您仍然需要根据您的特定要求对其进行调整。

请记住，您还可以使用 js 类创建 getters 和 setters。

Person.prototype.function = getFirst()
  return this.first;