Debouncing input (e.g. for ajax requests)

[corford]

Looking through the source there doesn't seem to be any effort to debounce/throttle calls to the fetch() method. It would be great if an optional debounce in milliseconds could be passed as a config option. It's nice to have for ajax requests so a remote request isn't fired on every keystroke.

P.S.
Thanks for making autocomplete, it's great!

[kraaden]

Yes, the widget doesn't include throttling/debouncing, because I try to keep it as small as possible.

You can just use autocomplete with an external debounce package from NPM
https://www.npmjs.com/search?q=debounce

import { debounce } from 'some-debounce-package';

autocomplete({
    fetch: debounce(function(...) { ... }, 250),
    ...
});

[corford]

It's true but for situations where you just want to drop in autocomplete via an external link, it's a tiny bit of extra friction for a feature that imho belongs native to the autocomplete plugin.

In terms of keeping code small as possible, I totally agree (and this is one of the main reasons I'm using your autocomplete). However, adding debounce would require about ~5 lines of code (I think?).

This:

if (val.length >= minLen) {
  settings.fetch(val, function(elements: Array<T>): void {
    if (keypressCounter === savedKeypressCounter && elements && !unloaded) {
      items = elements;
      inputValue = val;
      selected = items.length > 0 ? items[0] : undefined;
      update();
    }
  });
} else {
  clear();
}

Would become:

if (val.length >= minLen) {
  window.clearTimeout(debounceTimer);
  debounceTimer = window.setTimeout(function() {
    settings.fetch(val, function(elements: Array<T>): void {
      if (keypressCounter === savedKeypressCounter && elements && !unloaded) {
        items = elements;
        inputValue = val;
        selected = items.length > 0 ? items[0] : undefined;
        update();
      }
    });
  }, debounceWaitMs);
} else {
  clear();
}

Then add debounceTimer and debounceWaitMs vars:

const debounceWaitMs = settings.debounceWaitMs || 25;
let debounceTimer : T | undefined;

[kraaden]

added to 2.2.1