Home

Simple Autocomplete Dropdown Using Vanilla JavaScript

25 views

Implementing an autocomplete dropdown in vanilla JavaScript can be efficiently done by utilizing key event listeners and manipulating the DOM. Below is an example that outlines the basic steps needed to create this feature:

  1. HTML: Basic structure with an input field and a container for suggestions.
  2. CSS: Simple styling for the dropdown suggestions.
  3. JavaScript: Logic to filter and display suggestions based on user input.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomplete Dropdown</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="autocomplete">
        <input type="text" id="autocomplete-input" placeholder="Start typing...">
        <div id="suggestions" class="suggestions"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.autocomplete {
    position: relative;
    width: 300px;
}

#autocomplete-input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.suggestions {
    position: absolute;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 150px;
    overflow-y: auto;
    background-color: white;
    width: 100%;
    box-sizing: border-box;
}

.suggestion-item {
    padding: 8px;
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #f0f0f0;
}

JavaScript (script.js)

const suggestions = [
    "Apple", "Banana", "Orange", "Pineapple", "Grapes", 
    "Strawberry", "Mango", "Blueberry", "Papaya", "Watermelon"
];

const inputField = document.getElementById('autocomplete-input');
const suggestionsContainer = document.getElementById('suggestions');

inputField.addEventListener('input', function() {
    const input = inputField.value.toLowerCase();
    suggestionsContainer.innerHTML = "";
    if (input) {
        const filteredSuggestions = suggestions.filter(item => 
            item.toLowerCase().startsWith(input)
        );

        filteredSuggestions.forEach(suggestion => {
            const div = document.createElement('div');
            div.classList.add('suggestion-item');
            div.textContent = suggestion;
            div.addEventListener('click', function() {
                inputField.value = suggestion;
                suggestionsContainer.innerHTML = "";
            });
            suggestionsContainer.appendChild(div);
        });
    }
});

document.addEventListener('click', function(e) {
    if (!suggestionsContainer.contains(e.target) && e.target !== inputField) {
        suggestionsContainer.innerHTML = "";
    }
});

Explanation:

  1. HTML: Contains an input field and a div to display suggestions.
  2. CSS: Styles the input field and dropdown suggestions for better visibility.
  3. JavaScript:
    • inputField.addEventListener('input', ...): Listens to the input event and shows suggestions that match the input value.
    • filteredSuggestions: Filters the suggestions array based on the input value.
    • div.addEventListener('click', ...): Populates the input field with the selected suggestion when an item is clicked.
    • document.addEventListener('click', ...): Closes the dropdown if clicking outside of it.

This implementation provides a basic, functional autocomplete dropdown using vanilla JavaScript. You can further extend and refine it based on specific requirements and use cases.