#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
22mo
Solved
Join the chat
Mar 01, 2022 (22 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🙌

Typesense

Lightning-fast, open source search engine for everyone | Knowledge Base powered by Struct.AI

Indexed 3011 threads (79% resolved)

Join Our Community

Similar Threads

Implementing Search Suggestion/Autocomplete Functionality in Typesense

Denis needed advice on implementing search suggestions in Typesense. Jason provided a solution for fetching after 3+ letters. However, questions on design pattern and passing hooks remain unanswered.

1

4
21mo

Troubleshooting Typesense Setup and Understanding Facets and Keywords

Demitri encountered errors when exploring Typesense for the first time. Jason guided them through troubleshooting and discussed facets, keyword settings, and widget configurations. Helin shared a Python demo app and its source code to help Demitri with their project.

1

56
21mo
Solved

Querying with Typesense-Js and Handling Null Values

michtio was querying using typesense-js and receiving fewer results than expected. Kishore Nallan suggested using different query parameters. Further discussion led to the handling of 'null' values and filtering syntax in the search queries. The thread ended with Jason offering migration support from Algolia to Typesense.

4

39
17mo
Solved

Resolving Typesense Setup Issues with VueJS

A sought help with setting up Typesense in a CDN VueJS application. Jason guided him to adjust the initialization and provided a solution to an undefined item warning, resulting in a successful setup.

4

87
31mo
Solved

Implementing State Export Feature Using Typesense InstantSearch.js on Node.js Backend

Kyle needed help passing search state to backend for implementing an "Export" feature, while using Typesense InstantSearch. Jason provided multiple solutions including advice on using Typesense InstantSearch adapter. The issue was resolved after some iteration.

1

10
28mo
Solved