// Basic initialization
const basicTagSelect = new TagSelect(document.getElementById('basic-select'));
// Listen for changes
document.getElementById('basic-select').addEventListener('change', function() {
document.getElementById('basic-output').textContent =
JSON.stringify(basicTagSelect.getValues(), null, 2);
});
// Advanced initialization with options
const advancedTagSelect = new TagSelect(document.getElementById('advanced-select'), {
placeholder: 'Search or add colors...',
createPrompt: 'Add color: {tag}',
maxTags: 5,
minTags: 1,
noResultsText: 'No colors match your search',
onChange: function(values) {
document.getElementById('advanced-output').textContent =
JSON.stringify(values, null, 2);
}
});
// Handle button clicks
document.getElementById('add-color').addEventListener('click', () => {
advancedTagSelect.add('pink', 'Pink');
});
document.getElementById('remove-color').addEventListener('click', () => {
advancedTagSelect.remove('red');
});
document.getElementById('clear-colors').addEventListener('click', () => {
advancedTagSelect.clear();
});
document.getElementById('refresh-control').addEventListener('click', () => {
advancedTagSelect.refresh();
});
// Disable creating new tags
const noNewTagSelect = new TagSelect(document.getElementById('no-new-select'), {
allowNew: false,
placeholder: 'Select fruits (no new items allowed)...',
onChange: function(values) {
document.getElementById('no-new-output').textContent =
JSON.stringify(values, null, 2);
}
});