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

Answered using ChatGPT 4o by ChatGPT4o

Question:

Auto-Complete Suggestion in Shape of Word Cloud (in Seperate Div, top of the input section, realtime), Using HTML, CSS, and JavaScript, Multiple tag via enter.

Answer:

Creating an auto-complete suggestion feature in the shape of a word cloud that appears in a separate div above the input section, and allows for multiple tags via the Enter key, involves a combination of HTML, CSS, and JavaScript. Below is a simple implementation of this concept:

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 Word Cloud</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div id="word-cloud"></div>
        <input type="text" id="input-field" placeholder="Type to search...">
        <div id="tags-container"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

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

#word-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
}

.word {
    margin: 5px;
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

#input-field {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
}

#tags-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tag {
    margin: 5px;
    padding: 5px 10px;
    background-color: #28a745;
    color: white;
    border-radius: 5px;
}

JavaScript (script.js)

const suggestions = ["apple", "banana", "cherry", "date", "elderberry", "fig", "grape", "honeydew"];
const inputField = document.getElementById('input-field');
const wordCloud = document.getElementById('word-cloud');
const tagsContainer = document.getElementById('tags-container');

inputField.addEventListener('input', updateWordCloud);
inputField.addEventListener('keydown', addTag);

function updateWordCloud() {
    const query = inputField.value.toLowerCase();
    wordCloud.innerHTML = '';
    if (query) {
        const filteredSuggestions = suggestions.filter(word => word.toLowerCase().includes(query));
        filteredSuggestions.forEach(word => {
            const wordElement = document.createElement('div');
            wordElement.className = 'word';
            wordElement.textContent = word;
            wordElement.addEventListener('click', () => addTagFromWord(word));
            wordCloud.appendChild(wordElement);
        });
    }
}

function addTag(event) {
    if (event.key === 'Enter' && inputField.value.trim() !== '') {
        const tagText = inputField.value.trim();
        createTag(tagText);
        inputField.value = '';
        wordCloud.innerHTML = '';
    }
}

function addTagFromWord(word) {
    createTag(word);
    inputField.value = '';
    wordCloud.innerHTML = '';
}

function createTag(text) {
    const tagElement = document.createElement('div');
    tagElement.className = 'tag';
    tagElement.textContent = text;
    tagsContainer.appendChild(tagElement);
}

Explanation

  1. HTML: The structure includes a container div that holds the word cloud, input field, and tags container.
  2. CSS: Styles for the word cloud, input field, and tags to make them visually appealing and responsive.
  3. JavaScript:
    • updateWordCloud function filters the suggestions based on the input and displays them in the word cloud.
    • addTag function adds a tag when the Enter key is pressed.
    • addTagFromWord function adds a tag when a word from the word cloud is clicked.
    • createTag function creates a tag element and appends it to the tags container.

This implementation provides a basic auto-complete suggestion feature in the shape of a word cloud, allowing users to add multiple tags by pressing Enter or clicking on the suggestions.