Introducing Search Feature 0:00Okay, I think we're ready to move on to the search functionality. So ideally, when I type into this text box, it should return to me only the posts that match what I typed in. Why am I explaining this to you? You know how search works, but we gotta make it work. So I'm going to show you this in two forms. In this first episode, it's going to be messy and ugly, but it's going to work. And then in the next episode, I'll show you how to extract what's known as a query scope to make things much cleaner. All right, let's get going. Reviewing Search Form Request 0:25to make things much cleaner. All right, let's get going. First up, I'm going to visit that post header. And yeah, right down here at the bottom is our search form. So it is wrapped in a form that submits a GET request. So that means it actually will submit. Notice right at the top, yep, we get a GET request where the search query is passed through the query string. Obviously. Okay. Inspecting Search Query Input 0:49Obviously. Okay. Now, if I go to my routes file, why don't we start by simply dying and dumping what we have in the request for search. Now, if we run this, of course, we get what the user is searching for. But if they don't search for anything at all, we get null. Okay, so maybe we can use this as a hook. We could say, well, if we have something in the request for search, then search the database. So we're going to build up hosts either way. But conditionally, we also need to limit the results to only those that match what we typed in. Building Conditional Query 1:19So we're going to build up hosts either way. But conditionally, we also need to limit the results to only those that match what we typed in. So here's what I'm going to do. I'm going to extract this post variable. Now, notice where we get at the end. Think of that as your way of saying, okay, I'm done building up my query. Execute that SQL. But we're not done yet. So I'm going to remove that. Next, we're going to say, if request has something for search,So I'm going to remove that. Next, we're going to say, if request has something for search, let's find only the posts, and we'll start with the title. Where the title is like what the user typed in. So we could do something like this. Now, very quickly, if you're not familiar with this, this is a standard SQL syntax. For example, in TablePlus, I could say right here, select star from posts. All right. But now let's find only those with a title that contains this text. So I could say where the title is like, but I can't just add that text there.But now let's find only those with a title that contains this text. So I could say where the title is like, but I can't just add that text there. Notice nothing comes up. Instead, we're going to add parentheses like this. Now we're saying you can find anything before this text and anything after this text. And you'll see we get two results here because that's contained there. All right. That's all we're doing as part of our query here. Finally, at the bottom, I could say posts get. And let's see if that works.Finally, at the bottom, I could say posts get. And let's see if that works. We'll come back to Firefox, give it a refresh. We're not searching for anything, so I get all of my results. But this time, let's search for that text. Run it. And now notice the results. We only get two. It's working. Again, it's not a super clean approach, but it does the trick. Searching Title and Body 3:04It's working. Again, it's not a super clean approach, but it does the trick. But now what if we want to also search for the description as well, or the body? Let's see what happens if I look for that. Okay. We know there was a post with a body that had that text, but we don't get any results. So let's append to this and say, give me the post where the title matches up, or, and I'm going to duplicate this, I can say, or where the body matches what the user typed in. Okay.I can say, or where the body matches what the user typed in. Okay. So now let's clean this up just a little bit. And we'll see what we get. We'll refresh and run it again. And now I get only the results that include that and the body. Now, you'll notice right here, I don't see it, but that's probably because it's in the body somewhere. Yeah. But it works. Preserving Search Input Value 3:56Yeah. But it works. Great. But notice how when I searched here, I lost the search query here, which can be confusing. So why don't we come back to our post header and set that as the initial value? We'll say, value equals, and then check to see if we have anything in the request for search. Okay. Next, why don't we put these on their own line? Okay. So come back and give it a refresh.Okay. So come back and give it a refresh. And now that just provides a little more feedback. So one more time, let's look for this. And it works. Or I can remove it entirely, and that'll bring us back to normal results, or just click on the homepage. It works. Okay. So in the next episode, if I go back to my routes file, we're going to refactor this,Okay. So in the next episode, if I go back to my routes file, we're going to refactor this, because it's not horrible right now, but you can begin to see how quickly your actions can become super messy as you build up your query. So we'll take a look at that in the next episode.
