Advanced Options
// 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();
});