Back
This example shows a multi-select autocomplete with tags positioned above the input and a clear icon using Ajax to fetch data.
const priorityAutocomplete = new AvalynxAutocomplete('#prioritySearch', {
fetchData: async (query) => {
const response = await fetch('php/result.php?type=priorities&search=' + encodeURIComponent(query));
return await response.json();
},
maxSelections: 4,
tagsPosition: 'above',
clearStyle: 'icon',
defaultSelections: [
{ key: 'PRI001', value: 'Critical' },
{ key: 'PRI002', value: 'High' }
],
onChange: (keys, values) => console.log('Priorities:', keys, values)
}, {
placeholder: 'Add priorities (max. 4)...',
noResults: 'No priorities found',
removeTitle: 'Remove'
});
AvalynxAutocomplete on GitHub Avalynx on GitHub