Question

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

当我想让Return键+鼠标点击自动选择下一个字段时出现问题。如果我不手动触发更改事件，则更改事件的ui.item为空。如果我手动触发它，它将使用空ui.item激发第二个更改事件。

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

简而言之 - 按下选项卡，输入或鼠标单击应将文本输入的值设置为用户名，将隐藏输入设置为用户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();
    }
}

Answer 2

不确定你是否还有这个问题，但我遇到了和你一样的困难。当涉及到JS＆amp; S时，我仍然是一个新手。 jQuery，所以可能有其他更好，更清晰的方法来做到这一点，但我不知道它们是什么，我设法让它在我的代码中工作，所以希望它适用于你或其他任何有这个问题的人。

我扩展了@Jacob_Kralls解决方案，并试图解决无法删除以前选择的条目的问题。由于ui.item在设置焦点后返回null，因此我添加了第二个隐藏字段来存储所选值的副本，然后您可以与复制的值字段进行比较，而不是检查大型或远程数据集。

这是小提琴：http://jsfiddle.net/Jvfx3/11/

带有新checkVal字段的Html片段：

 <div>
  <input type="hidden" class="user-id" id="h1" />
  <input type="hidden" class="user-name-checkVal" id="cv1" />
  <input type="text"   class="user-name" id="t1" />
  <label>User ID is: <span>undefined</span></label>
 </div>

Javascript片段：

在select事件中，将checkVal字段设置为等于所选值。

select: function (event, ui) {
  $(this).siblings(".user-id").val(ui.item.userId);
  $(this).siblings(".user-name-checkVal").val(ui.item.value);
  $(this).siblings('label').find('span').text(ui.item.userId);
},

在更改事件中将用户名值与checkVal进行比较，在删除值时允许空用户名。

change: function (event, ui) {
  var username = $(this).val();
  var checkVal = $(this).siblings(".user-name-checkVal").val();
  if (username == '') {
     //username has changed, and now its null. value has been deleted.
     // clear everything set when value was selected.

     $(this).val('');
     $(this).siblings(".user-name-checkVal").val('');
     $(this).siblings(".user-id").val('undefined');
     $(this).siblings('label').find('span').text('undefined');

   } else if (username != checkVal) {
     //username was not selected from list. reset everything set by select.
     $(this).siblings(".user-name-checkVal").val('');
     $(this).siblings(".user-id").val('');
     $(this).siblings('label').find('span').text('undefined');

     //user-name is invalid, alert user of the error.
     alert('Invalid username. choose from list.');

     //since the value was entered, and not selected, keep focus here.
     $(this).val('');
     $(this).focus();
   }
},

关闭事件，再次比较用户名和checkVal，只有匹配时才将焦点设置到列表中的下一个项目。（这在chrome中工作，但是在firefox中，光标仍然在下一个项目中结束，不知道为什么）

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

     }
}

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

2 个答案: