So for the search drop down you see on this website, I initially went with Algolia's InstantSearch.js. This was my implementation:
So this isn't too bad, easy enough to understand and manage. However, my production bundle was 227kb (this includes highlight.js, which I am using for code syntax highlighting).
A couple things to note:
I'm manually calling the Algolia search API.
fetch (without the polyfill) to make the search request.
Since there's currently no
x-for/loop syntax in Alpine.js, when I receive the search results I join together a string of HTML and then insert that into the DOM. This isn't 100% safe, but I'm the only one in control of the content, so I'm okay with it for now. I wouldn't recommend doing this for scenarios where you do not control the content.
And to top it off, the production build JS is down to 27kb:
/js/app.js 27.5 kB
If you want to try a demo of the search component, feel free to check out the search component on this website!
Subscribe to my newsletter to know when I publish more content in the future.