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 {HTML, CSS, JS}

Answer:

Creating an auto-complete suggestion feature for an input field that displays suggestions as a word cloud involves a combination of HTML, CSS, and JavaScript. Below is a simple example to get you started:

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="autocomplete-container">
        <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)

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

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

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

.suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    box-sizing: border-box;
    z-index: 1000;
}

.suggestion-item {
    margin: 5px;
    padding: 5px 10px;
    background: #007bff;
    color: white;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

.suggestion-item:hover {
    background: #0056b3;
}

JavaScript (script.js)

const suggestions = [
    "apple", "banana", "cherry", "date", "elderberry", "fig", "grape", "honeydew",
    "kiwi", "lemon", "mango", "nectarine", "orange", "papaya", "quince", "raspberry",
    "strawberry", "tangerine", "ugli fruit", "vanilla", "watermelon", "xigua", "yellow passion fruit", "zucchini"
];

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

input.addEventListener('input', () => {
    const query = input.value.toLowerCase();
    suggestionsContainer.innerHTML = '';

    if (query) {
        const filteredSuggestions = suggestions.filter(item => item.toLowerCase().includes(query));
        filteredSuggestions.forEach(item => {
            const suggestionItem = document.createElement('div');
            suggestionItem.classList.add('suggestion-item');
            suggestionItem.textContent = item;
            suggestionItem.addEventListener('click', () => {
                input.value = item;
                suggestionsContainer.innerHTML = '';
            });
            suggestionsContainer.appendChild(suggestionItem);
        });
    }
});

Explanation

  1. HTML: The HTML structure includes an input field and a container for the suggestions.
  2. CSS: The CSS styles the input field and the suggestions container. The suggestions are displayed as a word cloud with flexbox.
  3. JavaScript: The JavaScript handles the logic for filtering the suggestions based on the user's input and displaying them in the suggestions container. When a suggestion is clicked, it populates the input field with the selected suggestion.

This example provides a basic implementation. You can further enhance it by adding more features such as keyboard navigation, better styling, and more complex filtering logic.