The delimiter option lets you control which keys commit a pending tag. By default ,, Enter and Tab commit. You can replace them entirely or add to them.
Tags are committed by typing \ (backslash) or . (period) after the text. The default delimiters are replaced: , and Enter do not commit free text — though Enter still applies a highlighted suggestion, and pending text is still committed when the input loses focus.
<label for="tags">Add tags (\ or . commits)</label>
<input id="tags" type="text" name="items" />
<script type="module">
import { Taga11y } from '../dist/taga11y.mjs';
new Taga11y(document.getElementById('tags'), {
suggestions: ['Apple', 'Banana', 'Cherry'],
delimiter: ['\\\\', '.'],
});
</script>This instance spells out the default delimiters explicitly — ,, Enter and Tab all commit. Pressing Tab with pending text commits it and keeps focus in the input for the next tag; pressing Tab again on the empty input moves focus to the next focusable element.
<label for="tags-tab">Add tags (, Enter or Tab commits)</label>
<input id="tags-tab" type="text" name="items-tab" />
<button type="button" id="next-field-tab">Next field</button>
<script type="module">
import { Taga11y } from '../dist/taga11y.mjs';
new Taga11y(document.getElementById('tags-tab'), {
suggestions: ['Apple', 'Banana', 'Cherry'],
delimiter: [',', 'Enter', 'Tab'], // the defaults, spelled out
});
</script>