Autocomplete: How do I debounce only 1 query, then use the returned items in multiple Sources?

[john-999]

Hi,

I need to have:

• only 1 debounced (remote) query, but then
• multiple Sources (but each one receiving a subset of the items returned by the 1 query)

How do I debounce this 1 query, in the below code?

import { autocomplete } from '@algolia/autocomplete-js';

// The generic debounce function
function debouncePromise(fn, time) {
  let timerId = undefined;

  return function debounced(...args) {
    if (timerId) {
      clearTimeout(timerId);
    }

    return new Promise((resolve) => {
      timerId = setTimeout(() => resolve(fn(...args)), time);
    });
  };
}
const debounced = debouncePromise((items) => Promise.resolve(items), 300);


// HOW DO I DEBOUNCE ONLY THIS 1 QUERY, THEN USE THE RETURNED `items` in `getSources()` BELOW ?
const items = fetch(`https://example.org/search/?q=${query}`)
  .then((response) => response.json())
  .then(({ results }) => results)
  .catch(() => []);


autocomplete({
  container: '#autocomplete',
  getSources({ query }) {
    return [
      {
        sourceId: 'items_part_1',
        getItems() {
          // Access the `items` returned from the debounced query
          return items.filter(({ name }) =>
            name.includes("_part_1")
          )
        },

        sourceId: 'items_part_2',
        getItems() {
          // Access the `items` returned from the debounced query
          return items.filter(({ name }) =>
            name.includes("_part_2")
          )
        },

        sourceId: 'items_part_3',
        getItems() {
          // Access the `items` returned from the debounced query
          return items.filter(({ name }) =>
            name.includes("_part_3")
          )
        }
      }
    ];
  }
});

[sarahdayan]

Hey @john-999,

getSources is a function so you can make a call to your API in it, then returning the sources in a chained then.

autocomplete({
  // …
  getSources() {
    return fetch('…').then(({ items }) => {
      return [
        {
          sourceId: 'source1',
          getItems() {
            return items.filter(/* … */);
          },
        },
        {
          sourceId: 'source2',
          getItems() {
            return items.filter(/* … */);
          },
        },
      ];
    });
  },
});

[john-999]

Thank you for your reply, @sarahdayan !

1 question remains though: Where does the debounced() go in your example? (It's taken from the function in the Algolia documentation here.)

Because, when we add it in your example (see below), it would not debounce the DB queries (= it would let all queries through), but only "debounce" the display of the results list (= "delay" the displaying of the drop-down menu).

So how is this to be corrected?

autocomplete({
  // …
  getSources() {

    // The debounced() like this does not debounce the queries, but only displays the "items" list with the delay...
    return debounced(fetch('…').then(({ items }) => {

      return [
        {
          sourceId: 'source1',
          getItems() {
            return items.filter(/* … */);
          },
        },
        {
          sourceId: 'source2',
          getItems() {
            return items.filter(/* … */);
          },
        },
      ];
      
    }));

  },
});