Auto-Complete Input Field with Tags Using HTML, CSS, and JavaScript

Answered using ChatGPT 4o by ChatGPT4o

Question:

A Big Input Field with Auto Complete and Tags (Based of a List of Words) as JSON, Result Preview; HTML, CSS, JS

Answer:

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:

  1. An input field for entering text.
  2. Auto-complete suggestions based on a predefined list of words.
  3. The ability to add tags from the suggestions.
  4. A preview of the resulting tags.

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 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>

CSS (styles.css)

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;
}

JavaScript (script.js)

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);
}

Explanation

  1. HTML: The HTML structure includes an input field for typing, a container for suggestions, a container for tags, and a preview area for the resulting JSON.
  2. CSS: The CSS styles the input field, suggestions dropdown, tags, and the result preview area.
  3. JavaScript: The JavaScript handles the logic for filtering suggestions based on the input, adding/removing tags, and updating the result preview.

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