All right, welcome to a new chapter. We're now gonna switch over to the front end and build a search UI. But you know what I, I'd like to take this super incrementally, one step at a time. So in this video we'll have a simple Blade file. You submit a form, you see the results, right? Very basic, but then we'll expand. We will highlight the results. We will set it up so that

We will highlight the results. We will set it up so that as the user is typing their search query, we instantly display results. We will add facets to the sidebar. So I really do think you're gonna get a lot out of this. Let's get going. So as you can see here, our routes file is empty. We're gonna start from scratch. Alright, let's get going. The very first thing I'd like to do is return a view

We're gonna start from scratch. Alright, let's get going. The very first thing I'd like to do is return a view and let's just call it search. Alright? Let's go ahead and create that file. And yeah, in this case we don't really have a full site here. We don't have the layout file, so I'm gonna put it all in line as you see here, Search for something. Alright, let's have a look in the browser.

Search for something. Alright, let's have a look in the browser. Alright, we got something on the page. It's not nothing. Okay, let's switch back and get to work. So the first thing I'm gonna do is once again, pull in tailwind, but I don't wanna deal with a build step or anything like that. So let's just reference it from a CDN like this. We can use cdn.tailwindcss.com. So now instantly we have access to all of the default, uh,

We can use cdn.tailwindcss.com. So now instantly we have access to all of the default, uh, tailwind utility classes. So now if I come back and give it a refresh, we can see the update there. Great. All right, so now well before we even add a form, before we add an input, let's just imagine we're reading from the query string. We're gonna perform the search and return the results. So with that in mind, let's return to our routes file.

We're gonna perform the search and return the results. So with that in mind, let's return to our routes file. Alright, so let's create our query variable. And I'm gonna read the query string for Q. That's pretty common, but this time I'm gonna add a default of *. And this is a special symbol with TypeSense that just means everything. Alright. Alright, so now let's perform our search. So we will have our TypeSense client.

All right. Alright, so now let's perform our search. So we will have our typeSense client. And remember, in our service provider, we, uh, bound client into the service container so that we instantiated and configured it as we would need for our application. So now when I ask for client, it's ready to go and I don't have to set the API key and the nodes all over again. Alright, cool. So let's switch back.

and the nodes all over again. Alright, cool. So let's switch back and we'll say client collections, books, documents, search. All right, let's provide our configuration. And yeah, this is a, a, a good refresher if you're working along. So let's see what AI has for us here. It's saying, yeah, the queue is query. That's correct. We're gonna query by the title only.

It's saying, yeah, the queue is query. That's correct. We're gonna query by the title only. In this particular case, we will not yet fast. We'll add that later. And yeah, let's just keep it super simple like this. Alright, so if we fetch the results and I return them as json, if I come back and I give this a refresh, yeah, and this is, and this is a review at this, this point, you already know how to do this.

and this is a review at this, this point, you already know how to do this. So in our case, it's just returning, um, everything basically. Maybe it's, it's doing a default sorting, uh, but there is no actual query taking place here. But if I were to override this and say $query equals, uh, Project, I'm sorry, let's fix that Project, even though it should still work. If we take a look, it looks like the top result is called

that project, even though it should still work. If we take a look, it looks like the top result is called the rosy project. Never heard of it, but lots of ratings. Okay, very cool. Alright, so now, yeah, if you want, you could just take this huge object and pass it to your Blade view. And yeah, for a server side rendered app, that's, that's fine. But if instead you're gonna pass this to your front end

rendered app, that's, that's fine. But if instead you're gonna pass this to your front end and it's gonna have to be sent to your JavaScript, uh, there's a lot here, you may not wanna do that. So with that in mind, why don't we just pluck the information we need for now in this video only, I wanna go into hits and I just wanna grab the title for each document. So let's do that now. Collect results, hits pluck document.

So let's do that now. Collect results, hits pluck document. Alright, so now, yeah, if we were to take this incrementally to show you what we get here, we now have an array of only the documents, but like I said, we wanna further pluck the title. So using Laravel collections, I can use the dot syntax like this. Give me the document and within each document give me the title.

Give me the document and within each document give me the title. So now if we give it a refresh, I have an array of only the titles, and yet for this initial example, it's all I care about. Later we'll grab some more, we'll call this titles or why don't we just say results and I'm gonna pass that to my view. Alright, let's switch over to our search place and render the results.

Alright, let's switch over to our search place and render the results. I'll do it within a simple, uh, unordered list. So I'm gonna use a foreach here and we'll say foreach $results as $result. And what's nice about this is I could then say, well, if there are new results, what do we do on that condition? And in this case, I can just say no matching results. Okay, so yeah, for each one, why don't we display the $results,

Okay, so yeah, for each one, why don't we display the results, which would be the title itself. So let's echo the results. Alright, so if we have a look, there we go. It's not very pretty, but it works. If I now swap this out with dark and there's the matching results, hairy, you get the idea. Okay, now let's style it just a little bit. So very quickly, why don't we put padding 8 all around.

Okay, now let's style it just a little bit. So very quickly, why don't we put padding: 8 all around and we'll say for the ul, let's do a border, maybe border-gray-300. And within it we'll have just a little padding all around. How about padding-y-2 instead and padding-x-4? Yeah, we're not trying to win any awards, of course. Uh, just something reasonably good looking. Okay, next I want an input above it. So let's do that. Now we'll add our form here.

Okay, next I want an input above it. So let's do that. Now we'll add our form here. So within it, we're gonna have an input one more time with a type of search. We'll give it a name of q. And when the form submits, of course, just basic form submission here, it is gonna go to search. And the method is going to be GET, so when I submit this form, it's going to make a GET request to the current page and send through a q, uh,

so when I submit this form, it's going to make a GET request to the current page and send through a queue, uh, value in the query string. So let's give it a shot. Oh, we need to see it a little better. Let's give it a class of border. We'll do the exact same border-gray-300, uh, but let's set border-bottom to zero so that we don't have doubled up borders. All right, there we go. Let's increase the width.

that we don't have doubled up borders. All right, there we go. Let's increase the width. And yeah, we just wanna kind of connect it there, like it's all one, uh, little component. Okay, so what should we do here? Uh, well first by default, because we already have a query, um, we'll say dark once again. Then the input should be populated with the current query, right?

Then the input should be populated with the current query, right? So let's do this. Let's put these on their own line since we don't have a lot of real estate. And then, uh, I will set the value equal to request $q. All right, come back, give it a refresh. And there we go. Uh, next, let's give it the exact same padding on the left and right.

Uh, next, let's give it the exact same padding on the left and right. There you go. And maybe, yeah, and we're just gonna duplicate the padding to make it consistent. Very cool. So now for dark, here are the matching search results and of course there's lots of accessibility to be, uh, considered here. Um, we should ideally be able to press the down arrow key.

uh, considered here. Um, we should ideally be able to press the down arrow key to select the results, but that is more advanced, more intricate stuff far beyond what we're focused on right now. So just gimme a little, a little leg room, um, to ignore some of that stuff for now. Okay, great. So if I were to change this, well, even though we don't have a submit form, by default, if I press enter, it will do the default action, right?

even though we don't have a submit form, by default, if I press enter, it will do the default action, right? Which is submit the form, which means I instantly, uh, see the results here. But of course we could add a little submit button as well. If we want further because we have an input type of search, we get an X button for free, that will clear that out. Alright, so once again, let's say php artisan run it. And uh, actually it didn't bring up what I thought it would,

Alright, so once again, let's say Project hail run it. And uh, actually it didn't bring up what I thought it would, but um, maybe, maybe this book list is a little bit older. Uh, I was expecting Project Hail Mary. Anyways, we do see the Rosy Project and the Happiness Project. This is all looking pretty good. Okay, so think about what we've accomplished here. If I go back to our routes file, all we really did is when you load the page,

If I go back to our routes file, all we really did is when you load the page, we read the query string. And if you didn't pass anything, we'll just search everything. We will always perform a search. And that way no matter what, um, we, we, we have something to look at. Uh, we have some recommendations to look at. And of course, in real life these would be clickable.

Uh, we have some recommendations to look at. And of course, in real life these would be clickable and maybe you click on it and it takes you to the dedicated book page. So yeah, I would imagine based on these results, the default is going to be popularity. It's gonna show me the most popular books in that entire database, and this would, this would probably match that. Okay, next, we perform our search.

and this would, this would probably match that. Okay, next, we perform our search and we've learned how to do that. Grab your collection and then search through the documents for the query and then specify what you are querying by. So yeah, once again, remember if you're gonna look for, um, Blake Crouch who wrote Dark Matter, well it's not gonna look through the authors. It's only gonna look through the titles. You need to be explicit about what you are searching.

It's only gonna look through the titles. You need to be explicit about what you are searching. So if you wanted to do authors as well, include that. And now if I run it again, we get the top matching result, it's gonna work. No problem at all. Okay, so now if we come back, we have our results in this little example, all we cared about was the title. In Real Life, you're gonna want a little bit more, but we fetch those titles and we pass them to our view.

In Real Life, you're gonna want a little bit more, but we fetch those titles and we pass them to our view and then we render them in as simple a way as we can possibly manage. We loop over them and we show the results, and then we have a form above it where you can submit, uh, for new results. So, so far, incredibly easy. In the next episode, let's take it one step further, I'll see you then.

In the next episode, let's take it one step further, I'll see you then.