See it for Yourself

Request a Demo

with listbox role so screen readers treat items as selectable options $resultsList = $('
').attr({ 'id': 'company-autocomplete-listbox', 'role': 'listbox', 'aria-label': 'Company suggestions' }); $resultsContainer.append($resultsList); $container.append($resultsContainer); } else { $resultsList = $resultsContainer.find('ul'); if($resultsList.length === 0) { // A11y: Create
with listbox role so screen readers treat items as selectable options $resultsList = $('
').attr({ 'id': 'company-autocomplete-listbox', 'role': 'listbox', 'aria-label': 'Company suggestions' }); $resultsContainer.append($resultsList); } } } $resultsList.empty(); return $resultsList; } function hideResults() { if($resultsContainer && $resultsContainer.length) { $resultsContainer.hide(); if($resultsList) { $resultsList.empty(); } } // A11y: Collapse combobox and clear active descendant when results are hidden $inputField.attr('aria-expanded', 'false'); $inputField.removeAttr('aria-activedescendant'); if(currentRequest) { currentRequest.abort(); currentRequest = null; } } // Function to clear the stored ID function clearSelectedId() { $hiddenFirmIdInput.val(''); valueWasSelected = false; $idDisplaySpan?.text('(None)'); // Update demo display // console.log("Hidden ID cleared"); } // Function to handle selection (from click or Enter key) function handleSelection($selectedItem) { if(!$selectedItem || $selectedItem.length === 0 || $selectedItem.hasClass('autocomplete-message')) { return; // Do nothing if no valid item or it's a message } const selectedText = $selectedItem.text(); const selectedId = $selectedItem.data('company-id'); // Retrieve stored ID if(selectedId) { $inputField.val(selectedText); // Update visible input $hiddenFirmIdInput.val(selectedId); // Update hidden input valueWasSelected = true; // Mark that selection occurred $idDisplaySpan?.text(selectedId); // Update demo display // console.log("Selected:", selectedText, "ID:", selectedId); hideResults(); $inputField.trigger('change'); // Optional: Trigger change event for other listeners } else { console.warn('Selected item missing company ID data:', $selectedItem); hideResults(); // Hide results even if ID is missing } } // --- Event Handlers --- $inputField.on('input', function() { const currentInputValue = $(this).val(); const searchTerm = currentInputValue.trim(); // CRITICAL: If the user types anything, clear the previously selected ID // Only clear if the flag 'valueWasSelected' is true, meaning the last change // wasn't already a manual input modification. if(valueWasSelected) { clearSelectedId(); } // We always set valueWasSelected to false here, because *any* input // event means the current value is potentially manual, until a selection happens again. valueWasSelected = false; clearTimeout(debounceTimer); if(currentRequest) { currentRequest.abort(); currentRequest = null; } if(searchTerm.length === 0) { hideResults(); clearSelectedId(); // Also clear ID if input is emptied return; } debounceTimer = setTimeout(() => { const $currentResultsList = ensureResultsListExists(); $currentResultsList.html('
• Searching...
'); $resultsContainer.show(); currentRequest = $.ajax({ url: `${apiUrl}?size=10&term=${encodeURIComponent(searchTerm)}`, method: 'GET', dataType: 'json', success: function(responsePayload) { $currentResultsList.empty(); responseData = []; let hasResults = false; if(responsePayload && Array.isArray(responsePayload) && responsePayload.length > 0) { responseData = responsePayload; $.each(responsePayload, function(index, item) { if(item && item.name && item.id) { // Ensure name and ID exist // A11y: Each suggestion is an option with a unique id for aria-activedescendant $('
• ') .text(item.name) .attr({ 'role': 'option', 'id': 'company-option-' + index, 'aria-selected': 'false' }) .data('company-id', item.id) // Store ID using jQuery's data() .appendTo($currentResultsList); hasResults = true; } }); } if(hasResults) { $resultsContainer.show(); // A11y: Expand combobox and announce result count to screen readers $inputField.attr('aria-expanded', 'true'); var count = $currentResultsList.find('li[role="option"]').length; $('#company-autocomplete-status').text(count + ' suggestion' + (count !== 1 ? 's' : '') + ' available. Use up and down arrows to browse.'); } else { $currentResultsList.html('
• No matching companies found.
'); $resultsContainer.show(); // A11y: Announce no results to screen readers $inputField.attr('aria-expanded', 'false'); $('#company-autocomplete-status').text('No matching companies found.'); } currentRequest = null; }, error: function(jqXHR, textStatus) { if(textStatus !== 'abort') { console.error('Autocomplete API Error:', textStatus, jqXHR); ensureResultsListExists().html('
• Error fetching results.
'); $resultsContainer.show(); // A11y: Announce error to screen readers $inputField.attr('aria-expanded', 'false'); $('#company-autocomplete-status').text('Error fetching company suggestions.'); } currentRequest = null; } }); }, debounceDelay); }); // Handle click on a suggestion item (delegated to container) $container.on('click', '.autocomplete-results li', function(e) { handleSelection($(this)); // Pass the clicked LI to the handler }); // A11y: Sync aria-selected and aria-activedescendant on mouse hover for consistency $container.on('mouseenter', '.autocomplete-results li[role="option"]', function() { var $items = $resultsList.find('li[role="option"]'); $items.removeClass('active').attr('aria-selected', 'false'); $(this).addClass('active').attr('aria-selected', 'true'); $inputField.attr('aria-activedescendant', $(this).attr('id')); }); $container.on('mouseleave', '.autocomplete-results li[role="option"]', function() { $(this).removeClass('active').attr('aria-selected', 'false'); $inputField.removeAttr('aria-activedescendant'); }); // Keyboard navigation and selection/dismissal $inputField.on('keydown', function(e) { if(!$resultsContainer || !$resultsContainer.is(':visible')) { // If results not visible, ESC shouldn't do anything special here return; } const $items = $resultsList.find('li:not(.autocomplete-message)'); if(!$items.length && e.key !== 'Escape') { return; } // No items to navigate (but allow ESC) let $currentActive = $items.filter('.active'); let currentIndex = $items.index($currentActive); switch(e.key) { case 'ArrowDown': e.preventDefault(); currentIndex = ($currentActive.length === 0) ? 0: (currentIndex + 1) % $items.length; $items.removeClass('active').attr('aria-selected', 'false'); $items.eq(currentIndex).addClass('active').attr('aria-selected', 'true'); // A11y: Point aria-activedescendant to the focused option so screen readers announce it $inputField.attr('aria-activedescendant', $items.eq(currentIndex).attr('id')); break; case 'ArrowUp': e.preventDefault(); currentIndex = ($currentActive.length === 0) ? $items.length - 1: (currentIndex - 1 + $items.length) % $items.length; $items.removeClass('active').attr('aria-selected', 'false'); $items.eq(currentIndex).addClass('active').attr('aria-selected', 'true'); // A11y: Point aria-activedescendant to the focused option so screen readers announce it $inputField.attr('aria-activedescendant', $items.eq(currentIndex).attr('id')); break; case 'Enter': e.preventDefault(); // IMPORTANT: Prevent form submission if($currentActive.length) { handleSelection($currentActive); // Use the selection handler } else { // Optional: Hide results if Enter is pressed without a selection hideResults(); } break; case 'Escape': // ESC key dismisses e.preventDefault(); hideResults(); break; case 'Tab': // Tab key dismisses hideResults(); break; } }); // Hide results when clicking outside $(document).on('click', function(e) { // Check if the click is outside the input AND outside the results container if(!$inputField.is(e.target) && !$container.is(e.target) && $container.has(e.target).length === 0) { if($resultsContainer && $resultsContainer.is(':visible')) { hideResults(); } } }); // Initial state check (optional) if($hiddenFirmIdInput.val()) { $idDisplaySpan?.text($hiddenFirmIdInput.val()); valueWasSelected = true; // Assume pre-filled value was selected } });