Multi-select (Tags above, Button, Ajax)

Back

This example shows a multi-select autocomplete with tags positioned above the input and a clear button using Ajax to fetch data.

Source of exampleCopy to clipboard


const tagAutocomplete = new AvalynxAutocomplete('#tagSearch', {
    fetchData: async (query) => {
        const response = await fetch('php/result.php?type=tags&search=' + encodeURIComponent(query));
        return await response.json();
    },
    maxSelections: 3,
    tagsPosition: 'above',
    clearStyle: 'button',
    onChange: (keys, values) => console.log('Tags:', keys, values)
}, {
    placeholder: 'Add tags (max. 3)...',
    noResults: 'No tags found',
    removeTitle: 'Remove'
});

AvalynxAutocomplete on GitHub Avalynx on GitHub