Interface SearchTermChangeEvent

Example

Implement your custom search backend

instance.addEventListener("search.termChange", async (event) => {
  // Opt-out from the default implementation.
  event.preventDefault();

  // We clear the search state, when the search term was removed.
  if (term.length == 0) {
    instance.setSearchState(searchState => searchState.set("term", ""));
  }

  // Manually update the UI. If `SearchState#term` is not updated, the update will
  // be ignored.
  instance.setSearchState(searchState =>
    searchState
      .set("term", event.term)
      .set("isLoading", true)
  );

  // Make sure to cancel all outstanding requests so that the loading state won't be
  // overwritten by an outdated search response (e.g. When the user types "foo" we
  // want to cancel all requests for "f" and "fo" while the user types - otherwise
  // incoming responses for "f" will clear the loading state of "foo"). This should
  // make `myCustomSearch` no longer resolve its promise.
  cancelSearchRequest();

  // Implement your custom search logic that returns SearchResult objects. This can use
  // `Instance#search()` internally.
  const results = await myCustomSearch(term);

  // Apply the new search results. For an actual use case, you probably want to update
  // `SearchState#focusedResultIndex` as well.
  instance.setSearchState(searchState =>
    searchState
      .set("isLoading", false)
      .set("results", results)
  );
});
Copy