如何通过键盘方向键选择li下拉列表文本（无需鼠标点击）

针对你遇到的问题，我们可以通过添加键盘事件监听、跟踪选中项索引并高亮的方式，实现方向键选择下拉列表的功能。下面是优化后的完整代码：

// 处理输入框搜索并加载下拉列表
$("#tbody").on("keyup", "input[name^=inputString]", function() {
  var $this = $(this);
  var search = $this.val().trim();
  if (search) {
    $.ajax({
      type: 'POST',
      url: 'ledgers.jsp',
      data: 'key=' + search,
      success: function(data) {
        $this.next('#showList').html(data);
        // 加载新列表后重置选中状态
        $this.data('selectedIndex', -1);
        $this.next('#showList').find('li').removeClass('active');
      }
    });
  } else {
    $this.next('#showList').html('');
  }
});

// 鼠标点击选择逻辑
$("#tbody").on('click', 'li', function() {
  var $li = $(this);
  var $input = $li.closest('tr').find("input[name^=inputString]");
  $input.val($li.text());
  $li.closest('#showList').html('');
});

// 添加键盘方向键与回车选择逻辑
$("#tbody").on("keydown", "input[name^=inputString]", function(e) {
  var $this = $(this);
  var $dropdown = $this.next('#showList');
  var $items = $dropdown.find('li');
  var selectedIndex = $this.data('selectedIndex') || -1;

  // 处理下箭头(40)与上箭头(38)
  if (e.keyCode === 40 || e.keyCode === 38) {
    e.preventDefault();
    if ($items.length === 0) return;

    // 更新选中索引
    if (e.keyCode === 40) {
      selectedIndex = (selectedIndex + 1) % $items.length;
    } else {
      selectedIndex = selectedIndex <= 0 ? $items.length - 1 : selectedIndex - 1;
    }

    // 高亮选中项
    $items.removeClass('active').eq(selectedIndex).addClass('active');
    $this.data('selectedIndex', selectedIndex);
  } 
  // 处理回车键(13)
  else if (e.keyCode === 13 && selectedIndex !== -1 && $items.length > 0) {
    e.preventDefault();
    var $selectedItem = $items.eq(selectedIndex);
    $this.val($selectedItem.text());
    $dropdown.html('');
    $this.data('selectedIndex', -1);
  }
});

关键说明 #

1. 优化AJAX逻辑：移除原代码中冗余的tr遍历，直接操作当前触发事件的输入框，提升性能。
2. 独立选中状态：用输入框的data-selectedIndex属性存储当前选中项索引，确保每个输入框的选中状态互不干扰。
3. 方向键交互：监听keydown事件（比keyup响应更及时），阻止默认行为避免光标移动，循环切换选中项并添加高亮类。
4. 回车确认选择：回车时将选中项文本填充到输入框，清空下拉列表并重置选中状态。

可选样式优化 #

添加CSS样式让选中项更直观：

#showList li.active {
  background-color: #007bff;
  color: #fff;
}

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