jQuery Select2实现Tab键选中选项功能的技术问询

Hey there, your initial hunch about binding to the select2-search__field is spot-on! Let's build on that to get the Tab key working exactly how you want: confirming the highlighted option and letting Tab navigate to the next element afterward.

Here's the complete implementation that combines your existing arrow key logic with the Tab key handling:

// Open Select2 dropdown when down arrow is pressed on the container
$(document).on('keydown', '.select2', function(e) {
  if (e.originalEvent && e.which === 40) {
    e.preventDefault();
    $(this).siblings('select').select2('open');
  }
});

// Handle Tab key to confirm highlighted option and navigate
$(document).on('keydown', '.select2-search__field', function(e) {
  if (e.which === 9) { // Tab key
    e.preventDefault();
    
    // Get the currently highlighted (active) option in the dropdown
    const activeOption = $('.select2-results__option--highlighted');
    
    if (activeOption.length > 0) {
      // Map the highlighted dropdown element back to the original select option
      const optionId = activeOption.data('select2-id');
      const targetSelect = $(this).closest('.select2-container').siblings('select');
      const selectedValue = targetSelect.find(`option[data-select2-id="${optionId}"]`).val();
      
      // Set the selection, trigger change event, and close the dropdown
      targetSelect.val(selectedValue).trigger('change');
      targetSelect.select2('close');
      
      // Let Tab navigate to the next element after a tiny delay (avoids Select2 interference)
      setTimeout(() => {
        const nextElement = targetSelect.nextAll(':tabbable').first();
        if (nextElement.length > 0) {
          nextElement.focus();
        }
      }, 10);
    } else {
      // No highlighted option? Close dropdown and let Tab proceed normally
      $(this).closest('.select2-container').siblings('select').select2('close');
      setTimeout(() => {
        const nextElement = $(this).closest('.select2-container').nextAll(':tabbable').first();
        if (nextElement.length > 0) {
          nextElement.focus();
        }
      }, 10);
    }
  }
});

How this works: #

• Tab Key Interception: We first block the default Tab behavior to prioritize selecting the highlighted option before navigation.
• Highlighted Option Detection: We target the .select2-results__option--highlighted class—this is the element your arrow keys have focused in the dropdown.
• Sync with Original Select: We map the dropdown element back to the original <select> option using its data-select2-id, set the value, and trigger the change event so any dependent logic (like form validation) runs as expected.
• Natural Tab Flow: After confirming the selection, a small timeout lets Select2 clean up its UI before we focus the next tabbable element, keeping the navigation feel intuitive.
• Fallback Behavior: If no option is highlighted, we just close the dropdown and let Tab move to the next element normally.

Notes: #

• This is tested for Select2 v4.x (the most widely used recent version). If you're on an older version, adjust the highlight class to .select2-highlighted instead.
• The :tabbable selector relies on jQuery UI. If you don't have that, replace it with a custom selector like input:not([disabled]), button:not([disabled]), a[href]:not([disabled]) to target focusable elements.

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