Now we implement the search feature. So as I start typing here, we should be able to filter the results and display only those that either match the company name or the role title or the location or the type of the role. So let's open the roles list, live wire component view, and let's bind this using wire model to something called search. And right here in the component, let's create that public property, public string search.

And right here in the component, let's create that public property, public string search. And to begin with, it's blank once again. Since we want this behavior to be live, let's add live. One thing to note is.live is very intensive. It keeps sending, uh, server requests every 200 milliseconds, as in when the user types, that's too much. So what we can do is we can use this option called the bounce instead

So what we can do is we can use this option called the bounce instead and specify some milliseconds, like let's say 500 milliseconds so that once the user gives a gap of 500 milliseconds while typing, that's when this gets updated. Otherwise it doesn't. So once the search term gets updated, we need a method here. Public function, updated search. So whenever this search is updated,

Public function, updated search. So whenever this search is updated, this method is called, and that's when we filter the list. So we first check if the search is empty or not. So we will say if this search, so only if there is something here, we filter the list. So here we say this rolls equals roll. Where first let's uh, take the title. So where title, like we can use this where e lockin method and check if this column is like the search term.

So where title, like we can use this where e lockin method and check if this column is like the search term. So we use percentage, search dollar, this search, and again, percentage. If any part of the string matches the search, it returns this. But we also need to check where if it matches the, uh, company name or the type or something like that, right? So we can further chain it with or where and continue this.

company name or the type or something like that, right? So we can further chain it with or where and continue this. So here we once again check it with the company instead come or where the, um, location is like the search or lastly where the type, I think that's what it is, part-time or full-time. And finally we get the results using the get method else. So if search is blank, we simply get all the rules. All right, let's check if this works in the browser.

So if search is blank, we simply get all the rules. All right, let's check if this works in the browser. Refresh, start searching full stack and it doesn't work. Oh, I think I made a mistake. This should be live deep bounces. Let's try it again. Let me search for junior. So once I stopped after a few, yeah, after a fraction of a second, this is what we saw Junior. Now let me search lateral. Well, and once again

Now let me search lateral. Well, and once again let me search uh, the location. So I will say remote and only the remote jobs are fetched. I will say freelance. Freelance, yeah, only those are fetched. I'll say I want only the developer roles, not the designers. And I get this, this is amazing. Let's enhance the UI a little bit. Um, the moment I start typing,

Let's enhance the UI a little bit. Um, the moment I start typing, let's also add a text here saying, uh, just showing roles with so and so that that same string. So right here I will add a simple paragraph with some classes that is text sm. I'll give it some margin MT four and text Amber 500. And right here I say, so I show this only if the search, uh, sorry,

And right here I say, so I show this only if the search, uh, sorry, only if the search exists. Otherwise I won't. Let's say and if so here I'll say showing results four. And here I print the search to, okay, so go back to the browser and let me type developer. And it says, showing results four devil. That's great. I think that's looks very light.

And it says, showing results four devil. That's great. I think that's looks very light. Let me change this to text Amber 600. So I will say full, yeah, that's amazing. I erase it and it disappears. This is great. Uh, but note one thing. The search works in dashboard page right now but doesn't work correctly in the bookmarks page. So for example, if I start type searching for design here, I will also be able to see the rules

So for example, if I start type searching for design here, I will also be able to see the rules that are not bookmarked. That's because of the way we've written our updated search method. Here we are simply searching and returning the rules, all the rules without checking if the type is all or bookmark. So we need a little complex query here.

is all or bookmark. So we need a little complex query here. What we'll do is we will use a query builder. So we'll say dollar query. We'll first build the query and then execute it. So we will say rule query and first check if the type is all or bookmarked. If it's all, then we don't need to do anything. But if the type is bookmarked, then we first need to chain this query

But if the type is bookmarked, then we first need to chain this query and we need to get only those rules where, uh, the user has bookmarked, right? Mm-hmm. And there's a very nice eloquent method, which is where attached to this was very recently added in lateral 10 version, we can say where attached to any user. So we can say authenticated user. So this, um, method can be used for many to many relations. And once we've changed this check,

So this, um, method can be used for many to many relations. And once we've changed this check, if this dot search exists, that is of the, it's being searched and instead of doing this, we will continue the query. So we'll say dollar query, let me do it in the next line. Dollar query wear, and then combine all these wear methods into one. Because when we have wear attached to, we can't have or wear, it can only con have a grouped wear clause.

Because when we have wear attached to, we can't have or wear, it can only con have a grouped wear clause. So here we say we use a closure function dollar queue, and then add all of this, cut it from here, dollar queue where title or where, and so on. We'll remove the get method and a semicolon here. Yes. So now if the search term has contained something, then we continue the query and we don't have the L statement here.

then we continue the query and we don't have the L statement here. We simply get, we simply execute the query now and add it to roll. So we say this rolls equals dollar query get so conditionally. If this type is bookmarked, then this gets attached to the query. And if the search is not empty, this gets attached to the query.

And if the search is not empty, this gets attached to the query. And finally we execute it this way. We don't do multiple queries, we do a single one. Let's see if this works. Refresh the page, start typing for designer. And yes, there are no results of course. Let's search for remote. We should be able to see only this. Perfect. Is it working in the dashboard as well at search for designer?

Perfect. Is it working in the dashboard as well at search for designer? And we are able to see all of them. This is amazing of how far we've come. See you in the next one.