All right, so I'm back on the Type Sense website and let's do this. Come along, let's go to guide search UI components. And yeah, once again, we're gonna take advantage of instant search as, now keep in mind this was initially developed by the Algolia team, but it's so popular in prominence that there is a type sense specific adapter that of course allows us to query against the type sense index.

that there is a type sense specific adapter that of course allows us to query against the type sense index and API versus Algolia. Alright, so I'm gonna show you how to use that. Let's open up instantsearch.js, and if I scroll down, of course we can choose our preferred framework. So again, I'm gonna use Vue, but if you like React, then it's mostly the same, just, uh, a different syntax of course.

but if you like React, then it's mostly the same, just, uh, a different syntax of course. So let's take a look at Vue InstantSearch. And if I scroll down, uh, let's begin by pulling it in. So let's install Vue InstantSearch. I'll paste that in. And now of course this is just the Vue specific version. So, uh, let's see this, uh, let's go to the dedicated documentation, down to installation. And let's see, yeah, there we go. So of course we also wanna pull in Algolia

And let's see, yeah, there we go. So of course we also wanna pull in Algolia search, so let's do that as well. npm install algoliasearch. Alright, so finally I can close that out just for now. And if I switch back to TypeSense, they have an adapter. So I'm gonna open this up and we will pull in the adapter. So let's go to installation. And here we go. In our case, I think we can get away with just this one right here and I'll paste that in.

In our case, I think we can get away with just this one right here and I'll paste that in. All right, and I think we're all configured. So let's do this. Let's switch back to the TypeSense website. And yeah, if I scroll down, let's see a general approach. Yeah, this is what we want. So above here, this is how you would normally interact with instant search, but we're using TypeSense here. So we pull in the TypeSense search adapter instead.

with instant search, but we're using typeSense here. So we pull in the typeSense search adapter instead. So we instantiated we passed through our API key. Exact same stuff we were doing on the server side. We can specify what are we querying by, what are we looking in, uh, what qualifies as something we are searching. Uh, so far we're just using title and authors and then we have our search client and we can instantiate it.

and then we have our search client and we can instantiate it. Alright? So it's very, very simple. Uh, once you understand what's going on here. All right, let's get going. I'm gonna copy all of this right here and let's switch to my editor. Alright, so let's start within our routes file for a quick refresher. And yeah, it looks like we have a search endpoint. We read the query string, we build up our search params,

And yeah, it looks like we have a search endpoint. We read the query string, we build up our search params, we search the books database effectively, or collection, we compile the results and we send them to a search/index view, view, view, view. So if I open this up, yeah, here's the code we have from the last episode where, uh, we bound to an input and then we manually submitted HX

we bound to an input and then we manually submitted HX requests to update the search. And by the way, this works great if, if this is fine for your needs, stick with it. No need to pull in a package if you're happy with what you have here. But yeah, if you need a little more power, a little more flexibility, if you want access to all of these widgets, then uh,

a little more flexibility, if you want access to all of these widgets, then uh, this probably isn't the way to go. Alright, so here's what I'm gonna do. I'm gonna select all of this and replace it with what I just copied from the TypeSense website. And actually, you know what, I don't think we need this right now, so I'm gonna comment that out temporarily. Okay, so let's do a little cleanup.

right now, so I'm gonna comment that out temporarily. Okay, so let's do a little cleanup. We are just gonna query by the title only. That's what we've been doing so far. And then let's set up our API key. And again, this is pretty much exactly what we were doing on the service side. So don't forget, this will be different for production. So you'll likely wanna reach for some kind of, uh, environment variable so that you can use one value

So you'll likely wanna reach for some kind of, uh, environment variable so that you can use one value for production and another value for, uh, local development. Okay? And your bundler will help with that. Okay, so this looks pretty good. Now I wanna build up our UI and because we've pulled in that view and instant search package, we have these custom components, they call them widgets, uh, that we can use. So here's what we'll do. Let's register it.

they call them widgets, uh, that we can use. So here's what we'll do. Let's register it by going into our app.js entry point, and I will import instantSearch from vue-instantsearch, and we are using Vue 3. Okay? So now I can use that as a Vue Global plugin like this. Cool. So now if I switch back, check it out, I can say Algolia instantSearch. And this is sort of our wrapper component.

I can say Algolia instant search. And this is sort of our wrapper component to get everything uh, rolling. And yeah, in this case the index name is books. That's the collection, that's the index we are working with. And notice for searchClient, we're not gonna use Algolia here, we're gonna use the typesense adapters, uh, searchClient. So if we leave it like this and we have a look in the browser

So if we leave it like this and we have a look in the browser notice we don't really see anything, but it's a little misleading. Let's open up our, uh, dom here and sure enough we can see the gears are moving. So we do have a div with a class of aIS instant search. So now let's add another widget, maybe a searchBox. All right, let's expand this. And they will all have the same prefix, aIS,

All right, let's expand this. And they will all have the same prefix, a IS, so I want a search box. All right, switch back, give it a refresh. Now we have a search box, and of course, all the bindings are in place here. So you'll notice if I open up the network tab and I hit a letter here, sure enough, it makes a query. So if I say FU and we open this up, we can see effectively what's going on.

So if I say FU and we open this up, we can see effectively what's going on. Now we are making a request to typeSense, uh, we're gonna use the multiSearch endpoint. It sends through the API key, and as part of the payload, we have the search here. So this is the collection or the index in this case. Uh, what are we querying by? What is the query itself? All of that is prepared for you automatically, which is the, um, the big win here.

All of that is prepared for you automatically, which is the, um, the big win here. So if we take a look at the results right here, again, ex exactly what we were seeing on the server side, because it is the same thing. It's the response from an API call. So sure enough, we have our hits and here's all of the, uh, the books that somehow match, uh, fu Let's take a look at the highlighting Leave thumps and the Gateway to fu.

fu Let's take a look at the highlighting Leave thumps and the Gateway to fu. Okay? So it is in fact working, which is really cool. All right, so now I'd like to see some search results. So let's do that. Alright, so let's have our hits, uh, which again, maps up with that key from the API response. Alright, so how do we want each item to appear? Well, here's what we can do. Uh, to start, I'm just going to spit out the items so you can view it for yourself.

Uh, to start, I'm just going to spit out the items so you can view it for yourself. Come back to Chrome and yeah, there's a lot to see here, but sure enough, it's the, the JSON response, right? So notice we have a, if you can see it, there we go. We have an item object within, uh, that first item. So item item. So let's do this instead. Let's, uh, destructure it and fetch it out of that object. So now if I scroll up, we just have that top level as you can see here.

So now if I scroll up, we just have that top level as you can see here. All right, and this is, this is everything we'd expect. So if we wanna grab the title, then we could say itemTitle. Alright? And it seems to be working. If I look for dark, sure enough, it works great. And even better, I don't have to figure this stuff out. I don't have to decide, well, what's the performant way to perform these requests? Do I deba? If so, how many milliseconds?

to perform these requests? Do I deba? If so, how many milliseconds? Uh, it's all done for me, which is really cool. But now I would like to see highlighting like we had before. So we have a custom component for that. Let's swap this out with Algolia InstantSearch highlights. So the attribute name that's effectively what field are we gonna highlight? Well, the title of course. And then finally, what is the hit?

Well, the title of course. And then finally, what is the hit? Well, the hit is the current item in our loop here. So let's bind to that. And that should do it. Come back, give it a refresh. Let's look for Harry. And sure enough, we're getting highlighting just like we did before, and it only took, uh, a single component, which is really cool. All right, so now to wrap up, check this out. This is really cool. We have access to all sorts

All right, so now to wrap up, check this out. This is really cool. We have access to all sorts of widgets that we can pull in. So if we take a look at the documentation for View Instant Search in the menu, we can come down to the section for, uh, where is it Widget Showcase. And I'm already on that page. And yeah, you can see all of these different widgets you can pull in very easily. So yeah, what, what might we want? Let's go to stats.

pull in very easily. So yeah, what, what might we want? Let's go to stats. So let's take a look at how we might use that. And we pull in a ISStats and we can provide some class names if we want. It's pretty seamless. So let's, uh, let's apply it, come back and maybe write down here at the bottom or maybe better after the search box, we could say ISStats. That's it. Come back to Chrome, give it a refresh.

after the search box, we could say a IS stats. That's it. Come back to Chrome, give it a refresh. And now we can see how many results are available and how long it took to perform the search. Search for Mockingbird. And we now have two results found in zero milliseconds, instantaneous, uh, which is kind of fun. We can clear that out. It all just works and we don't have to manually, uh, implement this, which is great.

and we don't have to manually, uh, implement this, which is great. Okay, so now let's do this. Let's return the facets in the next episode and figure out how we can use instant search to display each facet and allow the User to refine their search query. I'll show you that in the next episode.