Home > widget-integration > FilterController > handleInCollectionSearch

FilterController.handleInCollectionSearch() method

Sets up in-collection search functionality. Initializes search input behavior including debounced search and clear button.

This method: - Sets up debounced keyup listener on search input (default 500ms delay) - Handles search query URL parameter updates - Manages input focus and cursor position on re-render - Sets up clear button click handler - Ensures input remains in viewport when focusing

Signature:

protected handleInCollectionSearch(_dom?: HTMLElement): Promise<void>;

Parameters

Returns:

Promise<void>

Remarks

The search delay can be customized via generalSettings.inCollectionSearchDelay. The method preserves input focus and cursor position using the data-input-focusing attribute to improve UX during filter updates.

Example

Override to customize search behavior:

window.boostWidgetIntegration.extend('FilterController', (FilterController) => {
  return class CustomFilterController extends FilterController {
    handleInCollectionSearch(_dom) {
      super.handleInCollectionSearch(_dom);

      // Add search suggestions dropdown
      const input = _dom.querySelector('.boost-sd__in-collection-search-input');
      input?.addEventListener('input', () => {
        this.showSearchSuggestions(input.value);
      });
    }
  };
});