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.
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:
<!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>
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;
}
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);
}
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.