Data

The data parameter is required as Object[] or String[].

It can be empty at initialization if you take the ownership on the querying by using the onKeyup callback to manage the data.

Querying on initialization

<script>
  const input = document.getElementById('auto-complete');
  const result = await fetch('/your-api');
  const data = await result.json();
  kompletr({
    input,
    data,
    onSelect: (selected) => {
      console.log('Do something with this selected value: ', selected);
    },
  });
</script>

Querying on the fly

<script>
  const input = document.getElementById('auto-complete');
  kompletr({
    input,
    data: [],
    onKeyup: async function (value, done) {
      const result = await fetch(`/your-api?q=${value}&limit=10&offset=0&...`);
      const data = await result.json();
      done(data);
    },
    onSelect: (selected) => {
      console.log('Do something with this selected value: ', selected);
    },
  });
</script>

TIP

💡 Refer to the cache option to improve performances and bandwith consumming.