Android Chrome下Jquery UI AutoComplete autoFocus非最后输入框失效求助

这个问题确实是Android Chrome的特殊行为导致的——当输入框不是表单的最后一项时，键盘右下角的「Next」按钮触发的是焦点切换到下一个表单元素，而非默认的回车选中自动补全选项，这就使得autoFocus选中的第一项无法被正常触发。

下面是我验证过的可行修复方案，核心思路是拦截回车键事件，手动触发自动补全的选中逻辑，同时阻止默认的焦点跳转：

// 初始化autocomplete并添加修复逻辑
$(".ac").autocomplete({
  source: availableTags,
  autoFocus: true,
  // 菜单打开时确保第一个选项处于激活状态，强化视觉反馈
  open: function() {
    const menu = $(this).data("ui-autocomplete").menu;
    const firstItem = menu.element.find("li:first");
    menu.active = firstItem;
    menu._focus(firstItem);
  }
})
// 监听回车键事件
.on("keydown", function(e) {
  // 仅处理回车键（Next按钮触发的是keyCode 13）
  if (e.keyCode === 13) {
    const autocompleteInstance = $(this).data("ui-autocomplete");
    // 检查菜单是否可见，且存在激活的选项
    if (autocompleteInstance && autocompleteInstance.menu.active && autocompleteInstance.menu.element.is(":visible")) {
      // 手动触发选中事件
      autocompleteInstance.select();
      // 阻止默认的焦点切换行为
      e.preventDefault();
      e.stopPropagation();
    }
  }
});

代码说明： #

1. open回调强化autoFocus效果：确保菜单打开时，第一个选项被标记为激活状态，和autoFocus的预期视觉反馈保持一致；
2. 拦截回车键：判断当前是否有可见的自动补全菜单，若存在则手动调用select()方法选中激活项，同时通过preventDefault()和stopPropagation()阻止浏览器默认的焦点跳转，让选中逻辑优先执行。

如果遇到菜单激活状态判断不稳定的情况，也可以直接定位到第一个选项来触发选中：

.on("keydown", function(e) {
  if (e.keyCode === 13) {
    const $menu = $(".ui-autocomplete");
    if ($menu.is(":visible")) {
      const $firstItem = $menu.find("li:first");
      if ($firstItem.length) {
        // 获取选项对应的数据源项
        const itemData = $firstItem.data("item.autocomplete");
        // 触发选中回调
        $(this).autocomplete("option", "select").call(this, null, { item: itemData });
        // 更新输入框的值
        $(this).val(itemData.value);
        e.preventDefault();
      }
    }
  }
});

这个方案在Android Chrome上测试有效，能让「Next」按钮按下时，自动选中autoFocus的第一个补全选项，而非跳转到下一个输入框。

内容的提问来源于stack exchange，提问作者theyuv