hcg-autocomplete - Live Demo

Interactive demos of hcg-autocomplete, a lightweight zero-dependency combobox for <input> fields. Try local filtering, async sources, multi-select chips, free-text values, and the JavaScript API. Version . hcg-autocomplete Full documentation

1. Basic local array (single select)

Type to filter a static list of city names.

Try it
View usage code 
hcgAutocomplete('#demo-basic', {
  source: ['Amsterdam', 'Berlin', 'Copenhagen', 'London', 'Paris']
});

2. Object items ({ value, label })

Use objects when the submitted value differs from the displayed label.

Try it
Selected value: —
View usage code 
hcgAutocomplete('#demo-objects', {
  source: [
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' }
  ],
  onChange: (input, value) => console.log(value)
});

3. Async remote source

Simulated API with setTimeout. Only the latest request is applied.

Try it
View usage code 
hcgAutocomplete('#demo-async', {
  minChars: 1,
  debounce: 250,
  source: (query, done) => {
    setTimeout(() => {
      done(null, allItems.filter((item) =>
        item.toLowerCase().includes(query.toLowerCase())
      ));
    }, 400);
  }
});

4. minChars and debounce

Suggestions appear after 2 characters with a 400ms debounce.

Try it
View usage code 
hcgAutocomplete('#demo-minchars', {
  source: ['Red', 'Green', 'Blue', 'Cyan', 'Magenta'],
  minChars: 2,
  debounce: 400
});

5. Multi-select with chips

Pick multiple tags. Press Backspace on an empty input to remove the last chip.

Try it
Values: —
View usage code 
hcgAutocomplete('#demo-multi', {
  multiple: true,
  source: ['HTML', 'CSS', 'JavaScript', 'TypeScript', 'React', 'Vue']
});

6. Free-text (allowCustom)

Press Enter to commit a value that is not in the suggestion list.

Try it
Value: —
View usage code 
hcgAutocomplete('#demo-custom', {
  allowCustom: true,
  source: ['gmail.com', 'outlook.com', 'yahoo.com']
});

7. Clearable and programmatic API

Use setValue(), getValue(), and clear().

Controls
Value: —
View usage code 
const api = hcgAutocomplete('#demo-api', {
  clearable: true,
  source: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter']
});

api.setValue('Mars');
api.setValue('Jupiter', true); // silent: no change event
api.getValue();
api.clear();

8. Disabled state

A disabled input cannot open the suggestion panel.

Try it
View usage code 
<input id="demo-disabled" type="text" disabled>

const api = hcgAutocomplete('#demo-disabled');
api.enable();
api.disable();

9. Update source at runtime

Replace the suggestion list with setSource() or setOption('source', ...).

Try it
View usage code 
const api = hcgAutocomplete('#demo-source', {
  source: ['Orange', 'Lemon', 'Lime']
});

api.setSource(['Strawberry', 'Blueberry', 'Raspberry']);
api.refresh();

10. Callbacks (event log)

All lifecycle callbacks logged below.

Try it
View usage code 
hcgAutocomplete('#demo-callbacks', {
  source: ['Cat', 'Dog', 'Rabbit', 'Hamster'],
  onInput: (input, query) => {},
  onOpen: (input) => {},
  onClose: (input) => {},
  onSelect: (input, item) => {},
  onChange: (input, value) => {}
});
JavaScript Library