0

我的页面上有两个文本输入：一个用于速记代码，一个用于该代码的文本描述。两个输入都应用了 jQuery 自动完成功能。如果用户从自动完成下拉菜单中选择一个代码，它也应该自动应用文本，反之亦然。

    $('#fc-workPerformedID').autocomplete({
        serviceUrl: BASE_URL + 'Qsys/FaultTypes',
        paramName: 'code',
        width: 'flex',
        autoSelectFirst: true,
        minChars: 1,
        transformResult: response => ({ suggestions: JSON.parse(response).map(d => ({ value: d.code, data: d })) }),
        formatResult: formatWT,
        onSelect: function (s) {
            $('#fc-workPerformedText').val(s.data.desc).change(); // I've added change() here
        }
    });

    $('#fc-workPerformedText').autocomplete({
        serviceUrl: BASE_URL + 'Qsys/FaultTypes',
        paramName: 'match',
        width: 'flex',
        autoSelectFirst: true,
        minChars: 2,
        transformResult: response => ({ suggestions: JSON.parse(response).map(d => ({ value: d.desc, data: d })) }),
        formatResult: formatWT,
        onSelect: function (s) {
            $('#fc-workPerformedID').val(s.data.code).change(); // I've added change() here
        }
    });

从逻辑上讲，这最初并没有更新其他输入的视图模型。为此，我找到了这种方法，建议change()在更新输入值后添加命令。我已经在我的代码中做到了。

这种方法的问题是，只要我调用change()其他输入字段的命令，它也会打开它的自动完成菜单。因此，例如，如果我在输入中选择某些内容，则单击后会立即打开fc-workPerformedID自动完成菜单。fc-workPerformedText如果我再次删除change()呼叫，它会再次按预期工作。

有什么办法可以防止这种情况发生吗？用户体验应该很简单：输入代码或文本，另一个值将自动填充并在视图模型中更新。

4

0 回答 0