See it for Yourself

Request a Demo

'); $resultsContainer.append($resultsList); $container.append($resultsContainer); } else { $resultsList = $resultsContainer.find('ul'); if($resultsList.length === 0) { $resultsList = $('
'); $resultsContainer.append($resultsList); } } } $resultsList.empty(); return $resultsList; } function hideResults() { if($resultsContainer && $resultsContainer.length) { $resultsContainer.hide(); if($resultsList) { $resultsList.empty(); } } 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.data) && responsePayload.data.length > 0) { responseData = responsePayload.data; $.each(responsePayload.data, function(index, item) { if(item && item.name && item.id) { // Ensure name and ID exist $('
• ') .text(item.name) .data('company-id', item.id) // Store ID using jQuery's data() .appendTo($currentResultsList); hasResults = true; } }); } if(hasResults) { $resultsContainer.show(); } else { $currentResultsList.html('
• No matching companies found.
'); $resultsContainer.show(); } currentRequest = null; }, error: function(jqXHR, textStatus) { if(textStatus !== 'abort') { console.error('Autocomplete API Error:', textStatus, jqXHR); ensureResultsListExists().html('
• Error fetching results.
'); $resultsContainer.show(); } 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 }); // 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'); $items.eq(currentIndex).addClass('active'); break; case 'ArrowUp': e.preventDefault(); currentIndex = ($currentActive.length === 0) ? $items.length - 1: (currentIndex - 1 + $items.length) % $items.length; $items.removeClass('active'); $items.eq(currentIndex).addClass('active'); 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 } });