JSFiddle - React, Tailwind, and code Playground

by ric47121

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomplete Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h2>Autocomplete with Bootstrap</h2>
        <input type="text" id="autocomplete" class="form-control" placeholder="Start typing...">
        <div id="suggestions" class="list-group mt-2"></div>
    </div>

    <script src="autocomplete.js"></script>
</body>
</html>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const data = ['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple', 'Grape', 'Strawberry'];
    const input = document.getElementById('autocomplete');
    const suggestions = document.getElementById('suggestions');

    input.addEventListener('input', function() {
        const query = this.value.toLowerCase();
        suggestions.innerHTML = '';

        if (query) {
            const filteredData = data.filter(item => item.toLowerCase().includes(query));
            filteredData.forEach(item => {
                const suggestionItem = document.createElement('a');
                suggestionItem.classList.add('list-group-item', 'list-group-item-action');
                suggestionItem.textContent = item;
                suggestionItem.href = '#';
                suggestionItem.addEventListener('click', function(e) {
                    e.preventDefault();
                    input.value = item;
                    suggestions.innerHTML = '';
                });
                suggestions.appendChild(suggestionItem);
            });
        }
    });

    document.addEventListener('click', function(e) {
        if (!input.contains(e.target)) {
            suggestions.innerHTML = '';
        }
    });
});