Note from 23rd 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 Webmentions

1 like

11 replies

  1. Haroen Viaene avatar 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
  2. Nicolas Hoizey avatar 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… 😅
  3. Haroen Viaene avatar 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…
  4. Nicolas Hoizey avatar Nicolas Hoizey
    BTW, I didn't manage including algoliasearch and autocomplete.js in my Rollup build:
    nicolas-hoizey.com/notes/2020/07/…
  5. Haroen Viaene avatar Haroen Viaene
    Would you be able to try out the upcoming major version which is a full rewrite? algolia-autocomplete.netlify.app
  6. Shipow avatar Shipow
    Please, say yes @nhoizey ^^ 💍
  7. Nicolas Hoizey avatar Nicolas Hoizey
    Well, I'm planning to remove it and use instantsearch instead… 😅
  8. Haroen Viaene avatar 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
  9. Nicolas Hoizey avatar 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! 😘
  10. Haroen Viaene avatar 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
  11. Nicolas Hoizey avatar 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…