Autocomplete Input in Javascript

<div class="container">
  <h1>Autocomplete Input</h1>
  <p class="subtitle">Search and select from suggestions</p>

  <div class="autocomplete-wrapper">
    <label for="searchInput">Search Countries</label>
    <div class="input-container">
      <input 
             type="text" 
             id="searchInput" 
             placeholder="Type to search..."
             autocomplete="off"
             >
      <div class="suggestions" id="suggestions"></div>
    </div>
  </div>

  <div class="selected-value" id="selectedValue" style="display: none;">
    <p>Selected:</p>
    <strong id="selectedText"></strong>
  </div>

  <div class="info">
    <p><strong>Keyboard shortcuts:</strong> Use arrow keys to navigate, Enter to select, and Escape to close.</p>
  </div>
</div>  

  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #28788E 0%, #1a5666 100%);
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            background: #ffffff;
            border-radius: 16px;
            padding: 40px;
            max-width: 500px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        h1 {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #28788E;
        }

        .subtitle {
            color: #666;
            font-size: 14px;
            margin-bottom: 32px;
        }

        .autocomplete-wrapper {
            position: relative;
            margin-bottom: 24px;
        }

        label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 8px;
            color: #333;
        }

        .input-container {
            position: relative;
        }

        input[type="text"] {
            width: 100%;
            padding: 14px 16px;
            background: #f8f9fa;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            color: #333;
            font-size: 16px;
            transition: all 0.2s;
        }

        input[type="text"]:focus {
            outline: none;
            border-color: #28788E;
            background: #fff;
        }

        .suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #fff;
            border: 2px solid #28788E;
            border-radius: 10px;
            margin-top: 8px;
            max-height: 300px;
            overflow-y: auto;
            box-shadow: 0 8px 24px rgba(40, 120, 142, 0.15);
            z-index: 1000;
            display: none;
        }

        .suggestions.active {
            display: block;
        }

        .suggestion-item {
            padding: 12px 16px;
            cursor: pointer;
            transition: background 0.15s;
            border-bottom: 1px solid #f0f0f0;
        }

        .suggestion-item:last-child {
            border-bottom: none;
        }

        .suggestion-item:hover {
            background: #e8f4f7;
        }

        .suggestion-item.selected {
            background: #28788E;
            color: #fff;
        }

        .suggestion-item strong {
            color: #28788E;
        }

        .suggestion-item.selected strong {
            color: #fff;
        }

        .no-results {
            padding: 12px 16px;
            color: #999;
            text-align: center;
            font-size: 14px;
        }

        .selected-value {
            margin-top: 24px;
            padding: 16px;
            background: #e8f4f7;
            border-radius: 10px;
            border-left: 4px solid #28788E;
        }

        .selected-value p {
            font-size: 14px;
            color: #666;
            margin-bottom: 4px;
        }

        .selected-value strong {
            font-size: 16px;
            color: #28788E;
        }

        .info {
            margin-top: 24px;
            padding: 16px;
            background: #f8f9fa;
            border-radius: 10px;
            border-left: 3px solid #28788E;
        }

        .info p {
            font-size: 13px;
            color: #666;
            line-height: 1.6;
        }

  const countries = [
            'Afghanistan', 'Albania', 'Algeria', 'Argentina', 'Australia',
            'Austria', 'Bangladesh', 'Belgium', 'Brazil', 'Canada',
            'Chile', 'China', 'Colombia', 'Croatia', 'Czech Republic',
            'Denmark', 'Egypt', 'Finland', 'France', 'Germany',
            'Greece', 'Hungary', 'Iceland', 'India', 'Indonesia',
            'Iran', 'Iraq', 'Ireland', 'Israel', 'Italy',
            'Japan', 'Jordan', 'Kenya', 'Kuwait', 'Malaysia',
            'Mexico', 'Morocco', 'Netherlands', 'New Zealand', 'Nigeria',
            'Norway', 'Pakistan', 'Peru', 'Philippines', 'Poland',
            'Portugal', 'Romania', 'Russia', 'Saudi Arabia', 'Singapore',
            'South Africa', 'South Korea', 'Spain', 'Sweden', 'Switzerland',
            'Thailand', 'Turkey', 'Ukraine', 'United Arab Emirates', 
            'United Kingdom', 'United States', 'Venezuela', 'Vietnam'
        ];

        const searchInput = document.getElementById('searchInput');
        const suggestionsDiv = document.getElementById('suggestions');
        const selectedValueDiv = document.getElementById('selectedValue');
        const selectedText = document.getElementById('selectedText');

        let currentFocus = -1;
        let filteredItems = [];

        function highlightMatch(text, query) {
            const regex = new RegExp(`(${query})`, 'gi');
            return text.replace(regex, '<strong>$1</strong>');
        }

        function showSuggestions(query) {
            if (!query) {
                suggestionsDiv.classList.remove('active');
                return;
            }

            filteredItems = countries.filter(country => 
                country.toLowerCase().includes(query.toLowerCase())
            );

            if (filteredItems.length === 0) {
                suggestionsDiv.innerHTML = '<div class="no-results">No results found</div>';
                suggestionsDiv.classList.add('active');
                return;
            }

            suggestionsDiv.innerHTML = filteredItems
                .map((item, index) => 
                    `<div class="suggestion-item" data-index="${index}">${highlightMatch(item, query)}</div>`
                )
                .join('');

            suggestionsDiv.classList.add('active');
            currentFocus = -1;
        }

        function selectSuggestion(value) {
            searchInput.value = value;
            selectedText.textContent = value;
            selectedValueDiv.style.display = 'block';
            suggestionsDiv.classList.remove('active');
            currentFocus = -1;
        }

        function updateFocus() {
            const items = suggestionsDiv.querySelectorAll('.suggestion-item');
            items.forEach((item, index) => {
                item.classList.toggle('selected', index === currentFocus);
            });

            if (currentFocus >= 0 && items[currentFocus]) {
                items[currentFocus].scrollIntoView({ block: 'nearest' });
            }
        }

        searchInput.addEventListener('input', (e) => {
            showSuggestions(e.target.value);
        });

        searchInput.addEventListener('keydown', (e) => {
            const items = suggestionsDiv.querySelectorAll('.suggestion-item');

            if (e.key === 'ArrowDown') {
                e.preventDefault();
                currentFocus = Math.min(currentFocus + 1, items.length - 1);
                updateFocus();
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                currentFocus = Math.max(currentFocus - 1, 0);
                updateFocus();
            } else if (e.key === 'Enter') {
                e.preventDefault();
                if (currentFocus >= 0 && filteredItems[currentFocus]) {
                    selectSuggestion(filteredItems[currentFocus]);
                }
            } else if (e.key === 'Escape') {
                suggestionsDiv.classList.remove('active');
                currentFocus = -1;
            }
        });

        suggestionsDiv.addEventListener('click', (e) => {
            const item = e.target.closest('.suggestion-item');
            if (item) {
                const index = parseInt(item.dataset.index);
                selectSuggestion(filteredItems[index]);
            }
        });

        document.addEventListener('click', (e) => {
            if (!e.target.closest('.autocomplete-wrapper')) {
                suggestionsDiv.classList.remove('active');
                currentFocus = -1;
            }
        });