jQuery UI 自动完成 - 让单击/输入移动到下一个字段

Question

我有多个输入字段可以使用 jQuery UI 的自动完成插件自动完成。每个输入都有一个相应的隐藏输入(例如，用户名与用户 ID)。在更改处理程序中，我设置隐藏字段的值。这完全符合预期。

当我想让回车键+鼠标点击自动选择下一个字段时，麻烦就来了。如果我不手动触发change事件，则change事件的ui.item为null。如果我手动触发它，它会触发第二个带有 null ui.item 的更改事件。

我可以在更改中添加一个防护来防止出现 null ui.item，但这会阻止我清除之前填写的字段。

简而言之，按 Tab、Enter 或单击鼠标应将文本输入的值设置为用户名，将隐藏输入设置为用户 ID，然后将焦点设置为下一个文本输入。

这是一个带有内联注释的 JSFiddle，用于在上下文中说明/解释问题:http://jsfiddle.net/shipstar/Jvfx3/4/

谢谢!

Answer 1

将焦点逻辑移至 close event 内，以及 select event 内的值更新程序.

http://jsfiddle.net/Jvfx3/6/

select: function (event, ui){
    var $userIdField = $(this).siblings(".user-id");
    var userId = ui.item ? ui.item.userId : '';
    $userIdField.val(userId);

    $(this).siblings('label').find('span').text(userId);
},
close: function(event, ui){
    if (!event.keyCode || event.keyCode === 13){
        $(this).parents('form').find('.user-name').filter(function (){
            return $(this).val() === '';
        }).first().focus();
    }
}