Note: When you have a search form on every page,…

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?

older note:
Note from 20 October 2020
newer note:
Note from 23 October 2020

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

Note from 23 October 2020