I'm implementing a site search in a site I have built. The site uses the JAM stack (11ty & Netlify) and I'm unsure which strategy to use for grabbing the query data.
It's a basic combobox pattern, user types n characters, I filter the Post titles and also Categories against their input string (I've merged these two collections), When they click on an item after filtering, it navigates to the page they want.
I have a Nunjucks file where I have built a simple JS array of HTML strings.
The Nunjucks file outputs a JS file which is stored in the project root. Each item in that array is basically like so
<li><a href="/my-first-post/">My first post<span class="search__item-type"> Post</span></a></li>
<!-- Several attributes omitted for brevity -->
I append those items to a <ul> element on an input event, I will limit how many are displayed in the list to something sensible, perhaps 10.
Currently, there are around 120 items in the generated JS file and this will of course grow steadily over time.
I've tried 2 ways thus far (both work):
Initially it was a JS object, without HTML strings, I used template literals in the search.js file and pushed them to a new array, but I kinda figured it would be more performant to let the template do that, to take some weight of the client???
So, I ended up with my current array, which I export into my search.js file
I'm fine with actually building the search functionality, I've done a few before, but they have either been just practice efforts where I'm grabbing the data from an array in the same JS file or I've been using temporary mock data and then other teams have added the integration, I've just built the frontend and functionality, they have dealt with the API.
I need this to be as performant as possible, so ideally I don't want the user downloading this file unnecessarily if I can avoid that, as not all users will want to use the search. As it is a module, I can see it is still downloaded in the Network tab, so perhaps this isn't the way to go???
I also need full access to this locally, whilst I'm building it, as accessibility is the priority and I need to test it to death, before it ever sees the light of day.
So, what would be the best way:
- Continue down my current path, a large array of HTML list items with all the attributes I need and just
insertAdjacentHTMLshould a user trigger an input event, then do my string comparison and everything else - Revert back to my initial idea, just store it as an object and build the items' HTML on the fly, that would of course reduce the imported file size, but I'd still be building those strings anyway, so I dunno :/
- Use an interchange format, such as JSON or something else
- Something else entirely
Thanks for reading