script.js

const browsers = ["Firefox", "Chrome", "Opera", "Safari", "Microsoft Edge",
                 "Vivaldi", "Brave", "Internet Explorer", "Yandex Browser"];

const input = document.getElementById('browser');
const suggestionsContainer = document.getElementById('suggestions');

function getSuggestions(inputText) {
    if(!inputText) return [];
    
    return browsers.filter(browser => 
        browser.toLowerCase().startsWith(inputText.toLowerCase())
    );
}

function showSuggestions(suggestions) {
    suggestionsContainer.innerHTML = '';
    
    if(suggestions.length === 0) {
        suggestionsContainer.style.display = 'none';
        return;
    }
    suggestions.forEach(suggestion => {
        const div = document.createElement('div');
        div.className = 'suggestion-item';
        div.textContent = suggestion;
        
        div.addEventListener('click', () => {
            input.value = suggestion;
            suggestionsContainer.style.display = 'none';
            
        });
        suggestionsContainer.appendChild(div);
    });
    
    suggestionsContainer.style.display = 'block';
}

input.addEventListener('input', function() {
    const inputText = this.value;
    const suggestions = getSuggestions(inputText);
    showSuggestions(suggestions);
});

document.addEventListener('click', function(e) {
    if (e.target !== input) {
        suggestionsContainer.style.display = 'none';
    }
});

input.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        suggestionsContainer.style.display = 'none';
    }
});