JavaScript：按下上下键时跳过特定类的列表项可行吗？

Absolutely! You can easily skip list items with the heading class when using up/down arrow keys for your autocomplete box. Here's a step-by-step implementation tailored to your structure:

Step 1: Confirm Your HTML Structure #

First, let's work with the exact markup you provided:

<ul id="autocomplete-list">
  <li class="heading">Some heading</li>
  <li><a href="#">A result</a></li>
  <li><a href="#">A result</a></li>
  <li><a href="#">A result</a></li>
  <li class="heading">Another heading</li>
  <li><a href="#">A result</a></li>
  <!-- Add more items as needed -->
</ul>

Step 2: Add JavaScript for Smart Navigation #

We'll track the active item, filter out non-selectable headings, and update the selection when arrows are pressed:

// Grab the autocomplete list and filter only selectable items (exclude .heading)
const autocompleteList = document.getElementById('autocomplete-list');
const selectableItems = Array.from(autocompleteList.querySelectorAll('li:not(.heading)'));
let currentIndex = -1; // Start with no item selected

// Listen for keydown events on the list
autocompleteList.addEventListener('keydown', (e) => {
  // Exit early if there are no selectable items
  if (selectableItems.length === 0) return;

  switch (e.key) {
    case 'ArrowDown':
      e.preventDefault(); // Stop page from scrolling
      currentIndex++;
      // Wrap around to the first item if we go past the last
      currentIndex = currentIndex >= selectableItems.length ? 0 : currentIndex;
      updateActiveItem();
      break;

    case 'ArrowUp':
      e.preventDefault(); // Stop page from scrolling
      currentIndex--;
      // Wrap around to the last item if we go before the first
      currentIndex = currentIndex < 0 ? selectableItems.length - 1 : currentIndex;
      updateActiveItem();
      break;
  }
});

// Update visual state and scroll to the active item
function updateActiveItem() {
  // Remove active class from all selectable items
  selectableItems.forEach(item => item.classList.remove('active'));
  
  // Highlight the current active item
  selectableItems[currentIndex].classList.add('active');
  
  // Optional: Smoothly scroll the active item into view if it's off-screen
  selectableItems[currentIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

Step 3: Add CSS for Visual Feedback #

Make the active item stand out and style headings to signal they're not selectable:

#autocomplete-list .active {
  background-color: #f0f0f0;
  font-weight: 600;
}

#autocomplete-list .heading {
  color: #666;
  font-style: italic;
  pointer-events: none; /* Prevent accidental clicks on headings */
}

Key Details: #

• We use li:not(.heading) to directly target only selectable result items, so we don't waste time checking class names during navigation.
• The currentIndex variable keeps track of which valid item is active, skipping headings entirely.
• Preventing default arrow key behavior stops the page from scrolling while users navigate the autocomplete list.

This setup lets users seamlessly move through only the result items with up/down arrows, completely ignoring the heading elements.

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