Search Function event

Hi,

I am trying to make the event on “result” and on “render” to work.

const mixin = createServerRootMixin({
  searchClient,
  indexName: "instant_search",
  searchFunction: function (helper) {
    //const page = helper.getPage();

    //OK
    helper.on("search", function (event) {
      console.log("A0");
    });

    //NOT WORKING
    helper.on("render", function (event) {
      console.log("A1"); 
    });

    //NOT WORKING
    helper.on("result", function (event) {
      console.log("A2");
    });

    helper.search();
  },
  routing: {
    router: nuxtRouter(this.$nuxt.$router),
  },
});

Regards,
Araldo Fidalgo

anyone?
Should i put a issue in github?

Hi Araldo,

The helper in searchFunction is not actually the one used to finally search, therefore it will not emit a result event (helper doesn’t have a render event, so that will never emit). Changing something on render sounds like the responsibility of a custom widget or middleware. What use case are you thinking of for these events? There’s a guide here which goes over the different levels of customisation you can use to make a custom widget.

I’d love to hear your final use case or goal, so we can find the most ergonomic way for it!

Hi,
The idea is simple. Is to place a toasted message after a new search has been loaded.

Araldo Fidalgo

this sounds like it would be distracting for the UI, if you show this after every character typed. Are you seeing slow response times that you want popups?

for the search box I did the debounce function. and I’m thinking of debouncing the message too.

Another situation, mobile menu “the image”, the search is very fast and the user may not realize that the results have been changed.

Indeed closing the menu does not necessarily convey the meaning of “filter has been applied”.

I would suggest 2 solutions:

Please note that InstantSearchJS propose a mobile compatible template, that is clearer for this use case. Filters are automatically applied and the results are well displayed

Demo: https://vue-instantsearch.netlify.app/examples/e-commerce/search/Appliances%2FDishwashers/?query=d

can i create a proxy when a search has been completed ?

the idea for the proxy is:

const searchClient = algoliasearch('', '');
const originalSearch = searchClient.search;
searchClient.search = (requests) =>
  originalSearch(requests).then((res) => {
    // do custom code here to set the toast
    // then return results
    return res;
  });

like this?

const searchClient = algoliasearch(
“X”,
“x”
);

const originalSearch = searchClient.search;
searchClient.search = (requests) =>
originalSearch(requests).then((res) => {
console.log(“originalSearch.then - done”);
return res;
});

const mixin = createServerRootMixin({
searchClient,
originalSearch,
indexName: “DEV_SCF_T2”,
routing: {
router: nuxtRouter(this.$nuxt.$router),
},
},
});

it is before finish loading…

you don’t pass both originalSearch & searchClient to the mixin, but only searchClietn. Can you make a sandbox of what you have so we can see what could cause this?

how do i check in the sandbox for: XHR finished loading: POST ?
response: “testing in a new windows” and open the the console…

the sandbox to play with algoliasearch proxy:

this is the kind of code I meant: https://codesandbox.io/s/nuxt-algolia-ssr-helper-forked-de36m?file=/pages/search.vue

(there seems to be an issue on codesandbox that makes it reload infinitely, it doesn’t happen locally)