Multi-select (Create with Enter)

Back

This example shows a multi-select autocomplete where you can add new elements by pressing the Enter key.

Source of exampleCopy to clipboard


const tagAutocomplete = new AvalynxAutocomplete('#tagSearch', {
    data: [
        { key: '1', value: 'JavaScript' },
        { key: '2', value: 'PHP' },
        { key: '3', value: 'HTML' },
        { key: '4', value: 'CSS' }
    ],
    maxSelections: 10,
    tagsPosition: 'inline',
    allowCreate: true,
    createShortcut: 'Enter',
    onChange: (keys, values) => console.log('Tags:', keys, values)
}, {
    placeholder: 'Search or add tags with Enter...',
    noResults: 'No results found',
    removeTitle: 'Remove'
});

AvalynxAutocomplete on GitHub Avalynx on GitHub