A Big Input Field with Auto Complete and Tags (Based of a List of Words) as JSON, Result Preview; HTML, CSS, JS
Creating a big input field with auto-complete and tags functionality involves several steps. Below is a complete example using HTML, CSS, and JavaScript. This example will include:
<!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 Tags</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-field" placeholder="Type to search...">
<div id="suggestions" class="suggestions"></div>
</div>
<div id="tags-container" class="tags-container"></div>
<div id="result-preview" class="result-preview"></div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.input-container {
position: relative;
}
#input-field {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
.suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
z-index: 1000;
}
.suggestions div {
padding: 10px;
cursor: pointer;
}
.suggestions div:hover {
background-color: #f0f0f0;
}
.tags-container {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
}
.tag {
background-color: #007bff;
color: #fff;
padding: 5px 10px;
border-radius: 3px;
margin: 5px;
display: flex;
align-items: center;
}
.tag .remove-tag {
margin-left: 10px;
cursor: pointer;
}
.result-preview {
margin-top: 20px;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
}
const words = ["apple", "banana", "cherry", "date", "fig", "grape", "kiwi", "lemon", "mango", "nectarine", "orange", "papaya", "quince", "raspberry", "strawberry", "tangerine", "ugli fruit", "vanilla", "watermelon", "xigua", "yellow passion fruit", "zucchini"];
const inputField = document.getElementById('input-field');
const suggestionsContainer = document.getElementById('suggestions');
const tagsContainer = document.getElementById('tags-container');
const resultPreview = document.getElementById('result-preview');
let tags = [];
inputField.addEventListener('input', () => {
const query = inputField.value.toLowerCase();
suggestionsContainer.innerHTML = '';
if (query) {
const filteredWords = words.filter(word => word.toLowerCase().includes(query));
filteredWords.forEach(word => {
const suggestion = document.createElement('div');
suggestion.textContent = word;
suggestion.addEventListener('click', () => addTag(word));
suggestionsContainer.appendChild(suggestion);
});
}
});
function addTag(word) {
if (!tags.includes(word)) {
tags.push(word);
updateTags();
updateResultPreview();
}
inputField.value = '';
suggestionsContainer.innerHTML = '';
}
function removeTag(word) {
tags = tags.filter(tag => tag !== word);
updateTags();
updateResultPreview();
}
function updateTags() {
tagsContainer.innerHTML = '';
tags.forEach(tag => {
const tagElement = document.createElement('div');
tagElement.classList.add('tag');
tagElement.textContent = tag;
const removeButton = document.createElement('span');
removeButton.classList.add('remove-tag');
removeButton.textContent = 'x';
removeButton.addEventListener('click', () => removeTag(tag));
tagElement.appendChild(removeButton);
tagsContainer.appendChild(tagElement);
});
}
function updateResultPreview() {
resultPreview.textContent = JSON.stringify(tags, null, 2);
}
This example provides a basic implementation. You can further enhance it by adding more features like keyboard navigation for suggestions, better styling, and more robust error