#community-help

Discussing Angular Instant Search Optimization

TLDR Ivan wanted to optimize Angular Instant Search by triggering search only on typing. Jason provided a solution and relevant documentation links. Kenneth provided additional input and advice.

Powered by Struct AI

1

1

1

14
20mo
Solved
Join the chat
Mar 01, 2022 (20 months ago)
Ivan
Photo of md5-bcbe2a4c9402d7445badbcf2ebdc68f8
Ivan
11:58 AM
Hi Jason with whom in your team i can discuss case for angular instant search? I am using angular instantsearch with typesenseInstantAdapter for algolia, i build custom autocomplete component via angular material. I want to provide such behavior: search should be triggered only when i start typing letters in inputbox of autocomplete and not on initial page loading
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
04:03 PM
Ivan I've done something similar with Vue and vanilla instantsearch.js. I'm personally not too familiar with Angular, but may be Kenneth can help?
04:03
Jason
04:03 PM
In Vue what I had to do was add a conditional rendering statement to the Hits component to only show it if the query in the search box is not empty
Ivan
Photo of md5-bcbe2a4c9402d7445badbcf2ebdc68f8
Ivan
04:37 PM
Jason thanks for answer, but we want to optimize page loading, thats why i want initial search results be empty or search not triggered at all, i want trigger search only after typing in searchbox. Kenneth can i do something like this with angular instant search?
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
04:38 PM
I think the link I shared above prevents the initial search query on page load, no?
Ivan
Photo of md5-bcbe2a4c9402d7445badbcf2ebdc68f8
Ivan
04:48 PM
Yes, that is what i was looking for,thank you very much!๐Ÿ™Œ

1

Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
04:49 PM
The one thing to keep in mind in that code snippet: instead of algoliaClient.search(requests) you want to call typesenseInstantSearchAdapter.search(requests) in the last line
04:51
Jason
04:51 PM
So it would look something like this:

js
const searchClient = {
  ...typesenseInstantSearchAdapter,
  search(requests) {
    if (requests.every(({ params }) => !params.query)) {
      // Here we have to do something else
    }

    return typesenseInstantSearchAdapter.search(requests);
  },
};

1

Ivan
Photo of md5-bcbe2a4c9402d7445badbcf2ebdc68f8
Ivan
04:51 PM
Yeah, again thanks a lot!
Kenneth
Photo of md5-507fd46b8d739b5201f89b33f1e4a216
Kenneth
04:55 PM
Looks like Jason beat me to it. Feel free to PM me if anything else comes up :thumbsup:

In terms of the initial page load, it's also worth noting that the instantsearch library displays the initial hits to initialize the connection for faster subsequent searches. I'm not sure if this also happens with Typesense, but if it is, it's worth considering.

In my own work I tend to prevent the initial page load by conditionally rendering only the refined results with an *ngIf to avoid any jarring UI experiences. While this does still send that initial request, it's not a big deal like with Algolia where you're counting every single request.
Ivan
Photo of md5-bcbe2a4c9402d7445badbcf2ebdc68f8
Ivan
04:58 PM
Thank you for your answer and advice๐Ÿ™Œ