#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.

20mo

Join the chat

Mar 01, 2022 (20 months ago)

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

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

04:04

Jason

04:04 PM

I just found this in the Angular instantsearch docs: https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-display/angular/#handling-the-empty-query

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

04:38 PM

I think the link I shared above prevents the initial search query on page load, no?

04:41

Jason

04:41 PM

Oh may be you're looking for this: https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-requests/angular/#detecting-empty-search-requests

Ivan

04:48 PM

Yes, that is what i was looking for,thank you very much!🙌

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);
  },
};

Ivan

04:51 PM

Yeah, again thanks a lot!

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.

04:56

Kenneth

04:56 PM

There's also this to read: https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-display/angular/#handling-the-empty-query

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 2776 threads (79% resolved)

Join Our Community Manage subscription

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.

19mo

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.

19mo

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.

15mo

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.

29mo

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.

26mo