Auto-Complete Suggestion with Word Cloud Using HTML, CSS, and JavaScript

Answered using ChatGPT 4o by ChatGPT4o

Question:

Auto Complete Suggestion for Input Type as a Words Cloud in Seperate Div, with Multiple Tags {as we press enter}. {HTML, CSS, JS}

Answer:

Creating an auto-complete suggestion feature with a word cloud in a separate div and multiple tags can be achieved using HTML, CSS, and JavaScript. Below is a simple implementation of this functionality:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto Complete with Word Cloud</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <input type="text" id="input" placeholder="Type to search...">
        <div id="suggestions" class="suggestions"></div>
        <div id="word-cloud" class="word-cloud"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
}

.container {
    width: 300px;
    margin: 50px auto;
    text-align: center;
}

#input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    box-sizing: border-box;
}

.suggestions {
    border: 1px solid #ccc;
    max-height: 150px;
    overflow-y: auto;
    display: none;
    background-color: #fff;
    position: absolute;
    width: 100%;
    z-index: 1000;
}

.suggestions div {
    padding: 10px;
    cursor: pointer;
}

.suggestions div:hover {
    background-color: #f0f0f0;
}

.word-cloud {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag {
    background-color: #007bff;
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    display: inline-block;
}

JavaScript (script.js)

const input = document.getElementById('input');
const suggestionsDiv = document.getElementById('suggestions');
const wordCloudDiv = document.getElementById('word-cloud');

const suggestions = ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig', 'grape', 'honeydew'];

input.addEventListener('input', () => {
    const query = input.value.toLowerCase();
    suggestionsDiv.innerHTML = '';
    if (query) {
        const filteredSuggestions = suggestions.filter(suggestion => suggestion.toLowerCase().includes(query));
        filteredSuggestions.forEach(suggestion => {
            const suggestionDiv = document.createElement('div');
            suggestionDiv.textContent = suggestion;
            suggestionDiv.addEventListener('click', () => {
                addTag(suggestion);
                input.value = '';
                suggestionsDiv.innerHTML = '';
            });
            suggestionsDiv.appendChild(suggestionDiv);
        });
        suggestionsDiv.style.display = 'block';
    } else {
        suggestionsDiv.style.display = 'none';
    }
});

input.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && input.value) {
        addTag(input.value);
        input.value = '';
        suggestionsDiv.innerHTML = '';
    }
});

function addTag(tag) {
    const tagDiv = document.createElement('div');
    tagDiv.className = 'tag';
    tagDiv.textContent = tag;
    wordCloudDiv.appendChild(tagDiv);
}

Explanation

  1. HTML: The HTML structure includes an input field for typing, a div for displaying suggestions, and another div for displaying the word cloud.
  2. CSS: The CSS styles the input field, suggestions dropdown, and the word cloud tags.
  3. JavaScript:
    • The input event listener filters the suggestions based on the user's input and displays them in the suggestions div.
    • The keydown event listener checks for the Enter key to add the current input value as a tag.
    • The addTag function creates a new tag and appends it to the word cloud div.

This implementation provides a basic auto-complete feature with a word cloud. You can further enhance it by adding more features like removing tags, better styling, and more sophisticated filtering.