Auto Complete Suggestion for Input Type as a Words Cloud in Seperate Div, with Multiple Tags {as we press enter}. {HTML, CSS, JS}
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:
<!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>
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;
}
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);
}
input
event listener filters the suggestions based on the user's input and displays them in the suggestions div.keydown
event listener checks for the Enter key to add the current input value as a tag.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.