从下拉列表中选择后，停止 jQuery 自动完成将输入字段聚焦

Question

我正在使用 http://bassistance.de/jquery- 的 jQuery 自动完成插件插件/jquery-plugin-autocomplete/ 当用户从下拉列表中选择结果时，输入字段将获得焦点。我怎样才能阻止插件这样做？ 我使用这篇文章中的提示使其工作： jQuery 自动完成插件不聚焦下一个单击的字段 但这仅在用户使用鼠标选择结果时才有效。然后输入字段不会获得焦点。但是当用户使用 ENTER 键或 TAB 键时，输入仍然获得焦点。

任何人都知道我如何更改此设置，以便当用户从下拉列表中选择一个值时，输入字段不会获得焦点？

预先非常感谢您！

问候，金

Answer 1

从插件的 selectCurrent() 函数中这一行的外观来看：

$input.trigger("result", [selected.data, selected.value]);

...每当通过鼠标或键盘选择选项时，自动完成输入上就会触发“结果”事件。

您可以绑定到同一事件并将焦点放在表单中的下一个控件上（我认为这就是您想要的，而不是仅仅从当前控件中删除焦点？）：

$("input").bind("result", function () {

   // Get all controls on the form
   var controls = $(this).closest("form").find("input, textarea, select, button");

   // Find the index of the next control
   var nextIndex = controls.index(this) + 1;

   // Check if this is already the last control, so wrap around to the first one
   if (nextIndex >= controls.length) nextIndex = 0;

   // Put focus on the "next" control
   controls.eq(nextIndex).focus();

});

Answer 2

您是否尝试过 jQuery UI 的自动完成插件？问题已经解决了一半——当您按 Tab 关闭自动完成功能时，输入字段会失去焦点。当按 Enter 时，它仍然是焦点，但这可以轻松修复：

$('#myInput').keyup(function() {
  // when Enter is pressed
  if (event.which === 13) {
    $(this).blur();
  }
});

编辑

jQuery 标准化 event 对象，因此不需要将其作为参数传递。

Answer 3

$( "#to" ).autocomplete({
    source: availableTags,
    select: function (event, ui) {
        $( "#to" ).val( ui.item.label );
        $('#to').blur();
        return false ;
    }
});