JavaScript - Hooks

Use hooks with the SearchStax Site Search solution's various JS Widgets to manipulate data before and after certain web events and customize Site Search functionality.

beforeSearch Hook

Pass this hook when initializing SearchStax. The function is called before search executes, allowing you to modify the search object to change query, page, itemsPerPage, order, facets, additionalProps, or cancel the search entirely.

To cancel search if the query is "test":

beforeSearch(props: ISearchObject) {
  const propsCopy: ISearchObject = { ...props };

  if (propsCopy.query === "test") {
    return null;
  }

  return propsCopy;
}

To pass additional query parameters, like a Search Profile name, modify the additionalProps:

beforeSearch(props: ISearchObject) {
  const propsCopy: ISearchObject = { ...props };

  propsCopy.additionalProps = [
    ...(propsCopy.additionalProps ?? []),
    { key: "model", value: "ElevatedResultsModel" },
  ];

  return propsCopy;
}

afterSearch Hook

Pass this hook when initializing SearchStax. The function is called after search executes, allowing you to modify search results before they get to the render pipeline, as in the example below.

afterSearch(results: ISearchstaxParsedResult[]) {
  const copy = [...results];

  if (copy[0]) {
    copy[0] = {
      ...copy[0],
      title: `${copy[0].title ?? ""} title suffix`,
    };
  }

  return copy;
}

beforeAutosuggest Hook

Pass this hook when initializing the input widget. The function is called before the autosuggest call executes, allowing you to modify the suggestion props object before it gets converted into an autosuggest call, as in the example below.

beforeAutosuggest: function (props: ISearchstaxSuggestProps) {
  const propsCopy = { ...props };
  // propsCopy.term = `${propsCopy.term}222`;
  return propsCopy;
}

afterAutosuggest Hook

Pass this hook when initializing the input widget. The function is called after the autosuggest call returns suggestions, allowing you to modify suggestions before they get to the render pipeline, as in the example below.

afterAutosuggest: function (result: ISearchstaxSuggestResponse) {
    const copy = { ...result };
    return copy;
 }

beforeFacetsRender Hook

Pass this hook in the Facets widget configuration. The function runs before facet values are rendered, so you can reorder values or adjust display labels for selected facet groups.

The hook must return facet data in the same structure. Match each target group by facet.name (not facet.field) before applying ordering logic.

searchstax.addFacetsWidget("searchstax-facets-container", {
  facetingType: "and",
  itemsPerPageDesktop: 3,
  itemsPerPageMobile: 99,
  hooks: {
    beforeFacetsRender: function (facets: IFacet[]) {
      const monthOrder = [
        "January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December",
      ];
      const monthIndex = new Map(monthOrder.map((name, index) => [name, index]));

      return facets.map((facet) => {
        if (facet.name !== "month") return facet;

        const values = [...facet.values].sort((a, b) => {
          const aValue = "value" in a ? a.value : "";
          const bValue = "value" in b ? b.value : "";
          const aRank = monthIndex.get(aValue) ?? Number.MAX_SAFE_INTEGER;
          const bRank = monthIndex.get(bValue) ?? Number.MAX_SAFE_INTEGER;
          return aRank - bRank;
        });

        return { ...facet, values };
      });
    },
  },
});

afterLinkClick Hook

Pass this hook when initializing the result widget. The function is called after the user clicks on a result item, allowing you to cancel the event if the function returns null, as in the example below.

afterLinkClick: function (resultClicked: ISearchstaxParsedResult) {
  const resultCopy = { ...resultClicked };
  return resultCopy;
}