如何用JavaScript/jQuery实现箭头键选择生成的li元素？

嘿，我明白你想要实现的功能——用方向键在搜索结果里导航，按回车直接跳转，对吧？这其实是搜索组件里非常实用的交互需求，我来给你一步步解决这个问题。

首先，我们需要跟踪当前选中的结果项索引，然后在键盘事件里处理上下箭头的导航逻辑，以及回车的跳转触发。下面是完整的修改方案：

步骤1：添加状态变量与高亮样式 #

首先在你的代码作用域里定义一个变量来跟踪当前选中项的索引，同时自定义一个高亮样式（方便用户直观看到当前选中的项）：

/* 自定义选中项的高亮样式，可根据你的页面风格调整 */
.mickyMouseResultLi.active-result {
  background-color: #f5f5f5;
  outline: 1px solid #ddd;
}

// 跟踪当前选中的结果项索引，初始为-1表示未选中任何项
let currentIndex = -1;

步骤2：修改键盘事件处理逻辑 #

接下来，我们需要修改你现有的keyup事件监听，加入对上下箭头和回车键的处理，同时修复原有代码里的小问题：

$(document.body).on("keyup", ".menuSearch", function (e) {
  // 获取所有搜索结果li元素
  const $results = $(".mickyMouseResultLi");
  const resultCount = $results.length;

  // 处理上箭头键
  if (e.keyCode === 38) { 
    e.preventDefault();
    // 循环导航：到第一个项后，按上箭头跳转到最后一个
    currentIndex = currentIndex > 0 ? currentIndex - 1 : resultCount - 1;
    updateActiveResult($results);
  } 
  // 处理下箭头键
  else if (e.keyCode === 40) { 
    e.preventDefault();
    // 循环导航：到最后一个项后，按下箭头跳转到第一个
    currentIndex = currentIndex < resultCount - 1 ? currentIndex + 1 : 0;
    updateActiveResult($results);
  } 
  // 处理回车键
  else if (e.keyCode === 13) { 
    e.preventDefault();
    // 如果有选中项，触发对应a标签的跳转
    if (currentIndex !== -1 && resultCount > 0) {
      $results.eq(currentIndex).find("a")[0].click();
    }
  } 
  // 原有搜索逻辑：非左右/上下箭头时执行搜索
  else if (e.keyCode !== 37 && e.keyCode !== 39) {
    $(".searchResults").html("");
    const searchField = $(".menuSearch").val();
    const expression = new RegExp(searchField, "i");
    HidingShowingUlForSearch();
    
    // 新搜索结果生成后，重置选中索引
    currentIndex = -1;
    
    $.each(finalJsonForMenu, function (key, value) {
      if (value.title.search(expression) !== -1 || value.description.search(expression) !== -1) {
        $("#searchResults").append(
          '<li class="list-group-item mickyMouseResultLi" style=" border:none; min-width: 95%;">' +
          '<a target="_blank" href="' + value.url + '"></a>' +
          '<p>' + value.title + '</p>' +
          '</li>'
        );
        // 注：修复了你原有代码中a标签的语法错误（缺少闭合>）
      }
    });
  }
});

// 辅助函数：更新选中项的高亮状态
function updateActiveResult($results) {
  // 移除所有项的高亮样式
  $results.removeClass("active-result");
  // 给当前选中项添加高亮样式
  $results.eq(currentIndex).addClass("active-result");
  // 可选：自动滚动到选中项，避免结果过多时看不到
  $results.eq(currentIndex)[0].scrollIntoView({ behavior: "smooth", block: "nearest" });
}

关键细节说明 #

• 修复语法错误：你原来生成的a标签存在语法问题（<a target="_blank" href="testlink" <=="" a="">），代码里已经修正为正确的闭合标签。
• 循环导航逻辑：当按上箭头到第一个结果时，会自动跳转到最后一个；按下箭头到最后一个时，跳转到第一个，提升用户操作的流畅性。
• 高亮反馈：通过自定义的active-result类，让用户清晰感知当前选中的项，你可以根据自己的页面风格调整样式细节。
• 搜索重置索引：每次执行新搜索时，重置选中索引为-1，确保新结果列表没有默认选中项。
• 回车跳转：回车时直接触发对应a标签的点击事件，和鼠标点击效果完全一致。

这样修改后，你的搜索结果就支持用上下箭头导航，按回车直接跳转了！

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