Events interface

RVS send events about user actions and RVS actions on the search UI. There is two possible ways to listen to events.

onEvent callback

onEvent callback can be defined on VS constructor or bound after lazy loading the RVS package.

onEvent takes one parameter, event, which is ValuSearchEvent typed.

type ValuSearchEvent =
    | {
          /**
           * Fired on RVS UI open
           */
          name: "opened";
          instance: ValuSearch;
      }
    | {
          /**
           * Fired on RVS UI closed
           */
          name: "closed";
          instance: ValuSearch;
      }
    | {
          /**
           * Fired when user clicks a search result
           */
          name: "search-result-clicked";
          terms: string;
          url: string;
          resultTitle: string;
          instance: ValuSearch;
      }
    | {
          /**
           * Fired on each search except for search more
           * searches.
           * NOTE: RVS searches as you type,
           * this event is fired a lot.
           */
          name: "search";
          terms: string;
          instance: ValuSearch;
      }
    | {
          /**
           * Fired with debounce from searches
           * except for search more searches.
           */
          name: "search-debounced";
          terms: string;
          instance: ValuSearch;
      }
    | {
          /**
           * Fired when navigating to group details
           * from groupped preview.
           */
          name: "group-results-clicked";
          terms: string;
          groupTitle: string;
          instance: ValuSearch;
      }
    | {
          /**
           * Fired when extra component GroupNav is
           * clicked.
           */
          name: "group-nav-clicked";
          terms: string;
          groupTitle: string;
          instance: ValuSearch;
      }
    | {
          /**
           * Fired when the search UI back button is
           * clicked.
           */
          name: "back-button-clicked";
          terms: string;
          groupTitle: string;
          instance: ValuSearch;
      }
    | {
          /**
           * Fired when RVS gets search response in
           * groupped preview
           */
          name: "search-response";
          terms: string;
          countTotal: number;
          responseGroups: {
              groupTitle: string;
              total: number;
              lang: string | undefined;
          }[];
          lang: string;
          instance: ValuSearch;
      }
    | {
          /**
           * Fired with debounce after getting search
           * response / responses in groupped preview
           */
          name: "search-response-debounced";
          terms: string;
          countTotal: number;
          responseGroups: {
              groupTitle: string;
              total: number;
              lang: string | undefined;
          }[];
          lang: string;
          instance: ValuSearch;
      }
    | {
          /**
           * Fired when RVS gets search response in
           * group details.
           *
           * NOTE: When scrolling for more search results
           * this event is fired with each search response.
           */
          name: "search-response-group-details";
          terms: string;
          countTotal: number;
          responseGroups: {
              groupTitle: string;
              total: number;
              lang: string | undefined;
          }[];
          lang: string;
          instance: ValuSearch;
      }
    | {
          /**
           * Fired with debounce after getting search
           * response in group details view
           */
          name: "search-response-group-details-debounced";
          terms: string;
          countTotal: number;
          responseGroups: {
              groupTitle: string;
              total: number;
              lang: string | undefined;
          }[];
          lang: string;
          instance: ValuSearch;
      }
    | {
          /**
           * Fired when group result is clicked.
           */
          name: "search-result-clicked-extended";
          terms: string;
          url: string;
          resultTitle: string;
          normalizedRelevancy: number;
          position: number;
          lang: string;
          uiLocation: string;
          groupTitle: string;
          bestResult: { title: string; url: string };
          instance: ValuSearch;
      };

Browser event

RVS also pushes custom browser events. You can add event listeners outside the RVS this way. Custom event name is valu-search-event and event type is ValuSearchBrowserEvent.

ValuSearchBrowserEvent has property .valuSearchEvent which includes the actual event information. For full list of events and their types please refer to previous section.

interface ValuSearchBrowserEvent extends Event {
    valuSearchEvent: ValuSearchEvent;
}

Usage example

// Add event handler for RVS browser event
window.addEventListener( "valu-search-event", (e: ValuSearchBrowserEvent) => {

    // Do something with the event
    console.log(e.valuSearchEvent.name);

    // Target only one type of event
    if(e.valuSearchEvent.name === "search-debounced"){
        // Typesafe event usage
        console.log(e.valuSearchEvent.terms);
    }
})