Auto Complete Suggestion for Input Type as a Words Cloud {HTML, CSS, JS}
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:
<!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>
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;
}
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);
});
}
});
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.