Transcript

  1. AdonisJS using fully server rendered HTML as our markup. For that, we're going to use AdonisJS, obviously, and then we'll also use EdgeJS as our template

  2. engine and we'll sprinkle in some unpoly to handle our form submissions, the autocomplete behavior of it, as well as make everything nice and fluid in between.

  3. For the actual search then, we're going to utilize something called Millisearch. This gives us a way to easily integrate full-text search, utilizing data that we index from our application into our Millisearch database.

  4. Now, this does offer a cloud solution that comes with a monthly subscription if that's something you're looking for just to get easily set up, but it's also self-hostable as well and that's the approach that we're going to take in this series.

  5. We're going to set this up locally on our machine so that we can utilize it throughout the series for our indexing and search behaviors.

  6. Real quick to note, Millisearch does also support LLM integrations as well as chat supports. That's outside the scope of this series.

  7. We're just going to be talking about full-text search, but it does have that available if you would like to go the extra step. Okay, as for what we'll actually be building throughout this series, it looks like this.

  8. It's just a simple search bar and whenever we search something, we get back results. The results that we get back are across multiple entities. You'll see that we have 318 books matching our ME search.

  9. We have one genre and then we also have three authors. When we perform our search, our authors are searching the author's full name, our genres

  10. are searching the genre's name, and then our books are searching the book's genre, the book's title, as well as its blurb, all three of which are displayed here.

  11. However, in this series, we will also take a moment to discuss how we can index data so that it's available for display, but not actually have it be searched against whenever

  12. we perform our search operation. Since this is a full-text search, it does support things like quoted searches.

  13. If we search, in quotes, Bear, we get back a full result for Bear in each of the three books that we get back. So we have Bear-friendly for each of those three.

  14. If we tag an S, we still get the same results, but then if we go a little bit further and do soap, we now get a full result match for Bear. So we have Bear-friendly, Bear-like, and Bear-friendly again.

  15. And then it will also search for soap more loosely from there. And you'll notice our third result does not have any matches for soap, at least not that I'm seeing.

  16. So it's falling back to a search result that it thinks is still applicable to our search there. So throughout the series, we're going to install and configure Melee Search locally on our machine.

  17. And then we'll create factories so that we can get some fake data to actually index and work with. We'll then create a command within our AdonisJS application to index all of the fake data that we have.

  18. But on top of that, we'll also discuss how we can index or remove from our index on a per-item basis. Then we'll get a simple search set up, and then we'll sprinkle in unpoly to make things

  19. a little bit more fluid, and then we'll work on our multi-search. So let's go ahead and dive in by getting Melee Search set up.

What We'll Be Building

In This Lesson

In this series, we'll be building a completely server-rendered multi-search using Meilisearch, Unpoly, and a little AlpinzeJS. We'll setup the open-source version of Meilisearch locally, setup seeders and factories to build fake data to index, and more!

Created by
@tomgobich
Published

Throughout this series, we'll be utilizing the open-sourced version of Meilisearch to index of data as full-text searchable documents.

The multi-search we'll be building will be fully server-rendered using Unpoly to handle our form submissions and responses and AlpineJS to show and hide our search results.

Join the Discussion 0 comments

Create a free account to join in on the discussion
robot comment bubble

Be the first to comment!