Note from 23 October 2020

When you have a search form on every page, with #Algolia's autocomplete, what is the current best way to load the full required JavaScript only when the input gets the focus?

12 reactions

1 like

11 replies

Haroen Viaene
you could add an event listener to the focus of the input, but then the initial search is going to be delayed by quite a bit
- 23 October 2020, 10:19
- Source
Nicolas Hoizey
I could use the hover instead of focus to be a little more responsive, even if there would be some false positives.

Anyway, my question was more about how to write such JavaScript, for asynchronous loading… 😅
- 23 October 2020, 10:59
- Source
Haroen Viaene
modern would be `import().then`, but if you're not using modules in production, I'd go with a simple loadScript function like this: stackoverflow.com/a/54032144/318…
- 23 October 2020, 11:01
- Source
Nicolas Hoizey
BTW, I didn't manage including algoliasearch and autocomplete.js in my Rollup build:
nicolas-hoizey.com/notes/2020/07/…
- 23 October 2020, 11:01
- Source
Haroen Viaene
Would you be able to try out the upcoming major version which is a full rewrite? algolia-autocomplete.netlify.app
- 23 October 2020, 11:02
- Source
Shipow
Please, say yes @nhoizey ^^ 💍
- 23 October 2020, 11:05
- Source
Nicolas Hoizey
Well, I'm planning to remove it and use instantsearch instead… 😅
- 23 October 2020, 11:05
- Source
Haroen Viaene
Also good :D although for a query-mostly / autocomplete flow, your experience today will be better with autocomplete, when you have many facets & filters, InstantSearch is better
- 23 October 2020, 11:07
- Source
Nicolas Hoizey
If there's an easy migration path (tutorial), I could test it, of course.

I've been using Algolia for free for years, time to give a little back! 😘
- 23 October 2020, 11:08
- Source
Haroen Viaene
we don't have as many guides as we should yet, so it's best to start from scratch over migrating. TL;DR: update dependencies, read algolia-autocomplete.netlify.app/docs/getting-s… and algolia-autocomplete.netlify.app/docs/autocompl…. If you want we can do a 1:1 call some time as well so we know what to focus on in docs
- 23 October 2020, 11:11
- Source
Nicolas Hoizey
I'll try to do it soon, but it's not top priority.

You can subscribe to this issue to know when I do it:
github.com/nhoizey/nicola…
- 23 October 2020, 11:23
- Source

Sam Magura

Why We're Breaking Up with CSS-in-JS
- Nicolas Hoizey
- 3 November 2022
- JavaScript, CSS, WebPerf
- 5 reactions
Thanks for reading this deep dive into runtime CSS-in-JS. Like any technology, it has its pros and cons. Ultimately, it's up to you as a developer…
Alistair Shepherd

Async Alpine — Asynchronous Alpine component loading
- Nicolas Hoizey
- 14 October 2022
- JavaScript, WebPerf
- 10 reactions
Async Alpine is a wrapper for the fantastic Alpine.js JavaScript library, giving you greater control of component loading and adding asynchronous/lazy…
Harry Roberts

Speeding Up Async Snippets
- Nicolas Hoizey
- 13 October 2022
- WebPerf, JavaScript
- 5 reactions
For all the resulting script is asynchronous, the `` block that creates it is fully synchronous, which means that the discovery of the script is governed…
Joe Liccini

Why Your Cached JavaScript Is Still Slow and Incurs Performance Overhead
- Nicolas Hoizey
- 13 September 2022
- WebPerf, JavaScript
- 4 reactions
Caching assets is a fantastic way to optimize the network overhead of your web application, there is still plenty of computational overhead associated…
Miško Hevery

Hydration is Pure Overhead
- Nicolas Hoizey
- 21 July 2022
- WebPerf, JavaScript
The re-execution of code on the client that the server already executed as part of SSR/SSG is what makes hydration pure overhead: that is, a duplication…

Note from 23 October 2020

Related contents with similar topics