So, let's say I was interested in searching for anything about JAWS, but I actually only want conspiracy theories about JAWS. So I go over to the Topics button here, hit it, and, well, we run into a problem because our search is cleared. And if I think, oh, well, I'll go and type JAWS in again, now I go back to All Posts. In other words, it just won't do. We need to update our front end so that both Topics and Search can be done at the same time. It shouldn't be too big a fix. Let's start by thinking about how our search form is submitted.

It shouldn't be too big a fix. Let's start by thinking about how our search form is submitted. Currently we always go to this route here, which is obviously going to be /posts. But if you think about what happens when you click on a topic, well, we have /posts, /conspiracies, or /posts, /questions. So instead of hard coding this route, I'm going to grab the page, consPage equals usePage. That's a helper from Inertia. And then we'll pass the page.url property into searchForm.get. So hopefully now if I was to click on conspiracies and then search for JAWS, rather than going

And then we'll pass the page.url property into searchForm.get. So hopefully now if I was to click on Conspiracies and then search for JAWS, rather than going to /posts, it will use the same URL, /posts, /conspiracies, and then it will append the query JAWS, which is exactly what we'd expect to happen. However, if I was to change now and perhaps be interested in reviews on the film JAWS, the search once again clears. So we need to handle the opposite interaction. Again this shouldn't be too big of an issue. So I'll come to the route helper here on the allPosts pill, and I'm going to pass a query helper.

So I'll come to the route helper here on the all posts pill, and I'm going to pass a query helper. So because this is not part of the route itself, it will just be appended to the query string, which is exactly what we want, and I'm going to set the value to searchForm.query. Let's take that very same thing and we'll apply it to all of the subtopics. We can just add that on after topic here. So the topic is topic.slug, and the query is whatever you've currently got in the search form. So now hopefully if we were to type JAWS, there are no reviews on JAWS, but if I click the conspiracies pill, we're still searching for JAWS and we see all conspiracies on JAWS.

So now hopefully if we were to type JAWS, there are no reviews on JAWS, but if I click the conspiracies pill, we're still searching for JAWS and we see all conspiracies on JAWS. If I go to all posts, I see the same thing. This is working exactly as we'd expect it to. Let's take a look at another issue with pagination. If I reduce the search maybe to just JA, you'll see that we actually have four pages of content for that query. If I click to go to page two, note in the URL that the query has disappeared, and although inertia still shows JA in the search field, if we were to scroll down, yeah, you can see that the pagination has been reset.

inertia still shows JA in the search field, if we were to scroll down, yeah, you can see that the pagination has been reset. We're back to basically showing every single post. Let's fix it. We actually need to fix this from the controller itself. So in PostController we have our index, and here we're performing our pagination of posts. I'm going to chain on a method called withQueryString, and what that will do is essentially tell the paginator that it needs to include the query string inside any links that it generates. So the pagination links that are created will have our query, our search term included in

generates. So the pagination links that are created will have our query, our search term included in them. And what that essentially means, if we come back and let's go ahead and search for JA and hit page three, see that the query stays in place as we move to page three. Let's go to page four, yep, working perfectly, back to page one, nice. So that little withQueryString helper is incredibly valuable any time you need to combine both pagination with different query parameters in your URL. Keep that one in mind. It works across all stacks.

Keep that one in mind. It works across all stacks. One last little tweak here would be a little button that allows me to quickly clear the current search, because at the moment I'd have to click on the search box, and I'd have to remove the item and click enter again. I know that's not a big deal, but I prefer to have a nice clear button for our users. So let's jump into post.index, and next to the secondary button here we can have a danger button. We only want to show this danger button if there actually is a search query. So we'll say v-if searchForm.query, and then maybe the text for this would just be clear.

We only want to show this danger button if there actually is a search query. So we'll say v-if searchForm.query, and then maybe the text for this would just be clear. And we'll listen for a click on this button, so @click, and if we click the danger button I'm going to call a function called clearSearch. Let's head to the bottom of our script and implement that clearSearch function. clearSearch equals a closure. Let's make it multi-line, and the first thing we'll do is grab the searchForm object and set the query property to an empty string, and then I can just call search again. So essentially that's the same as removing all of the text in the search field manually and then hitting the search button, and that should ensure that all results are shown again.

So essentially that's the same as removing all of the text in the search field manually and then hitting the search button, and that should ensure that all results are shown again. Let's see if it works. We'll go back to the front end. I'll type in JAWS, hit enter, and we see all reviews for JAWS. If I click clear, yep, it disappears as we'd expect because there's no search term anymore, but note that the query has been reset to an empty string, and once again we're seeing all of the available posts in our forum. I just have another edge case that's come to mind. Let's say I type JA, which gives me multiple pages, and I'll go to page two, but then I'll

I just have another edge case that's come to mind. Let's say I type JA, which gives me multiple pages, and I'll go to page two, but then I'll refine my search to JAWS and search again. Now note that this returns no results, but that's because it's trying to do the query JAWS on page two, but there is no page two for this search query. If I click on the one here, yeah, you'll see that we have some reviews for JAWS. So there is a bit of an issue with pagination not being reset when you change the search. We can fix that from the front end. So inside our search form here, I'll create a page prop manually set to 1. So in other words, what that will do is any time we search, the page parameter is going

So inside our search form here, I'll create a page prop manually set to 1. So in other words, what that will do is any time we search, the page parameter is going to be reset to 1. Let's see if that fixes things. So we have JA selected. I'll go to page two. Then I refine my search to JAWS and hit enter, and you'll see that that's actually redirected us to the first page again, seen as we've started a new search. Now whilst what we've created is incredibly easy to set up and maintain and manage, it does have some pretty large limitations.

Now whilst what we've created is incredibly easy to set up and maintain and manage, it does have some pretty large limitations. For example, let's say I'm interested in posts about singing in the rain. If I spell that singing, I'm proper English, so why wouldn't I? And then I hit enter, I'm going to see nothing, no posts at all. And that's because essentially in the database, it's spelt like that. I didn't know that. I don't know how it's spelt in the database. It should still show me relevant posts when I type the full word, when I make a small typo.

It should still show me relevant posts when I type the full word, when I make a small typo. Also, let's say I say singing and rain, again, it's not going to show me any results because if I wanted it to show me full results, I should say singing in the rain. And of course, I'll have to remember the little quote mark there for it to work. And yet then I receive results. But let's say I even excluded that little quote. Now I get no results. So you see, although the search works, it's very dependent on us getting the exact syntax of the text in either the title or the body exactly right, which we're just never going

So you see, although the search works, it's very dependent on us getting the exact syntax of the text in either the title or the body exactly right, which we're just never going to be able to do as humans. Is there a more powerful solution? Yes, there is. Let's talk about it in the next episode.