Source: Product (Single-select, Clear Button) Copy to clipboard

// Single + Button (default)
const productAutocomplete = new AvalynxAutocomplete('.avalynx-autocomplete', {
  fetchData: async (query) => {
    const response = await fetch('php/result.php?type=products&search=' + encodeURIComponent(query));
    return await response.json();
  },
  maxItems: 5,
  clearStyle: 'button',
  onChange: (key, value) => console.log('Product:', key, value)
}, {
  placeholder: 'Search product...',
  noResults: 'No products found'
});

Source: User (Single-select, Clear Icon) Copy to clipboard

// Single + Icon
const userAutocomplete = new AvalynxAutocomplete('.user-autocomplete', {
  fetchData: async (query) => {
    const response = await fetch('php/result.php?type=users&search=' + encodeURIComponent(query));
    return await response.json();
  },
  clearStyle: 'icon',
  onChange: (key, value) => console.log('User:', key, value)
}, {
  placeholder: 'Search user...',
  noResults: 'No users found'
});

Source: Category (Single-select, Pre-selected, Icon) Copy to clipboard

// Single + Icon + Pre-selected
const categoryAutocomplete = new AvalynxAutocomplete('.category-autocomplete', {
  data: categories,
  clearStyle: 'icon',
  onChange: (key, value) => console.log('Category:', key, value)
});

Source: Tags (Multi-select, Tags above, Clear Button) Copy to clipboard

// Tags above + Button
const tagAutocomplete = new AvalynxAutocomplete('.tag-autocomplete', {
  data: tags,
  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'
});

Source: Priorities (Multi-select, Tags above, Clear Icon, Pre-selected) Copy to clipboard

// Tags above + Icon + Pre-selected
const priorityAutocomplete = new AvalynxAutocomplete('.priority-autocomplete', {
  data: priorities,
  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'
});

Source: Skills (Multi-select, Tags inline, Clear Button) Copy to clipboard

// Tags inline + Button
const skillAutocomplete = new AvalynxAutocomplete('.skill-autocomplete', {
  data: skills,
  maxSelections: 5,
  tagsPosition: 'inline',
  clearStyle: 'button',
  onChange: (keys, values) => console.log('Skills:', keys, values)
}, {
  placeholder: 'Add skills (max. 5)...',
  noResults: 'No skills found',
  removeTitle: 'Remove'
});

Source: Languages (Multi-select, Tags inline, Clear Icon, Pre-selected) Copy to clipboard

// Tags inline + Icon + Pre-selected
const languageAutocomplete = new AvalynxAutocomplete('.language-autocomplete', {
  data: languages,
  maxSelections: 5,
  tagsPosition: 'inline',
  clearStyle: 'icon',
  defaultSelections: [
    { key: 'LNG001', value: 'German' },
    { key: 'LNG002', value: 'English' }
  ],
  onChange: (keys, values) => console.log('Languages:', keys, values)
}, {
  placeholder: 'Add languages (max. 5)...',
  noResults: 'No languages found',
  removeTitle: 'Remove'
});