Okay, let's work on searching for ideas. Now, ideally, you want a really robust search, so a User can search for an Idea and possibly find it before they post a new one to reduce the amount of duplicate ideas. Now, I would probably make use of a service like Algolia to make this happen, as integration with Laravel Scout is pretty straightforward. However, for now, I'm just going to do a very basic search with Livewire. So let's go ahead and do that. So let's add a new variable here called search, add it to the query string. Let's add this reset page. So updating search, add this, change it to search, okay.

Let's add this reset page. So updating search, add this, change it to search, okay. Let's add a wire:model on our search input box. So that would be right here, and make sure to use input type equals search, as it gives you extra features like this X button here to clear the search. So we can do wire:model equals search, okay. So now back to here, it's pretty much the same thing as the other filters. We just need an extra when clause for our search. So let's paste that in. And I want to perform the search only if it's at least three characters long.

So let's paste that in. And I want to perform the search only if it's at least three characters long. So we can do when strlen($search) is greater than or equal to three characters. So I'm just going to search for the title here, but you can add the description if you want as well. You can use an orWhere clause, but I'm okay with just the title for now. So we're going to search the title. The operator we're going to use is the like operator. And the thing we're searching for is going to be $search.

The operator we're going to use is the like operator. And the thing we're searching for is going to be this search. So whatever the user types in. So let's also put wildcards around this search to make it a bit more dynamic. So strings before whatever the user types in, or characters before whatever the user types in our search for as well. So we can add this and this as well. Okay. And I think that's it if I did everything correctly. So let's look for my awesome Idea.

And I think that's it if I did everything correctly. So let's look for my awesome Idea. And that doesn't seem to work. What did I do wrong? Sorry, I have a typo here should be wire:model. Let's try that again. Hard refresh, search for my awesome. And again, it still doesn't work. Sorry, I have another typo here. The bracket should be here.

Let's make sure to handle the case where there's no results. So if I just type gibberish here, we get nothing. So let's go to our ideas index. So this applies to anything, any of our filters, not just the search. So this would be right here. So instead of a foreach, let's use a for else. So this would be the same. Let's end a for else instead. And within here is the empty case. So we can just say something like <div>, no ideas were found.

SVG. Okay, so that's how it looks like. So let's go ahead and add that. So I'm just going to add some quick CSS here. class equals mx-auto to center it, I have a width of 70 and a margin-top of 12. And this is the text. This also has some classes. So let's wrap it in a div class text-gray-400 centered text, oops, text-center, font-bold, and a margin-top of 6. Okay.

and a margin top of six. Okay. And here is where the image goes. So image src, let's say, use the asset helper. And it's within the image folder, no-ideas.svg. Or you can paste in the SVG directly. But I'm just gonna use an image here. alt will be no-ideas. class is mx-auto. And let's see how that looks.

Class is MX auto. And let's see how that looks. Okay, so that looks pretty good. And let me just change the blending mode. So it's black and white. So I don't think there's a utility for blend modes in Tailwind. So I'll just put an inline style here. mix-blend-mode is luminosity. Okay. So that should change it to black and white.

Okay. So that should change it to black and white. And it does. Cool. So if there are results, display this image. But if there are results, then display the results. And there's still no results for this because we have categoryOne selected. But there it is when we select all categories. Okay, as always, let's write some tests for this. I am going to duplicate our other FiltersTest.

Okay, as always, let's write some tests for this. I am going to duplicate our other FiltersTest. So let's duplicate it and it's rename it to SearchFiltersTest. Okay. And let's change the name here. SearchFiltersTest. SearchFiltersTest. Okay, so let's change this or let's get rid of the other ones too. And we can change this one to searchingWorksWhenMoreThanThreeCharacters. Okay.

And we can change this one to searching works when more than three characters. Okay. And we don't need three Users here. This is fine. We have three Ideas or sorry, we have two Ideas. Let's make one more here. Idea. Let's say my first Idea, my second Idea, and my third Idea don't need these votes. Okay, so we're testing ideas index. We are setting the search to search for the second one.

Okay, so we're testing Idea index. We are setting the search to search for the second one. So let's say second. So the count should be one. And Idea first title should be the only result. So let's say my first Idea. Hopefully this works and it does not. Oh, sorry. It's really late here. I'm sure you saw that second.

So we can just duplicate this entire test and let's say searching, or let's just say does not perform search if less than three characters. Okay. So we can do pretty much the same thing, but just change the search to anything, really anything less than three. And there should still be three results here. And I don't really care about the second condition. Okay, let's try this. And it does work. And let's do one more here.

And it does work. And let's do one more here. Similar to the other ones we've been doing, I just want to test if it works correctly with any other of the filters. So let's say search works correctly with category filters. So ideaOne, ideaTwo, did I name this ideaTwo as well up there? It doesn't really matter because I'm not using the variables, but let me just change this. Did I use it up here too? I did. So I must have used it in the other files as well.

I did. So I must have used it in the other files as well. Actually, this other file looks fine. So I think I just did it in here. Anyways, back down here to our test. So this one's going to have categoryOne, this one's going to have categoryOne as well. And this one will have categoryTwo. So let's go ahead and remove this. So let's set the category to categoryOne. Let's set the search to, say, first.

So let's set the category to category one. Let's set the search to, say, first. So these first two, actually, let's set it to idea. And it should only search, or the search should only result in these two, because we're also filtering by the category. So category one, search first, or sorry, idea. And the count should be two. And I'm okay with just the count. So let's try this. And we are at green, cool.

So let's try this. And we are at green, cool. So let's run the entire test suite here. And everything is passing. I kind of wish there was a way for this plugin to run in parallel, now that that's a thing in Laravel 8. So again, if you forgot, php artisan test --parallel runs much faster, because it's using all of your computer's cores. So yeah, let's go ahead and make a commit here, git add, what is this, 30, git commit episode 30, search filter.

So yeah, let's go ahead and make a commit here, git add, what is this, 30, git commit episode 30, search filter.